html - 如何垂直拉伸(stretch)内联 block 的容器？

Question

我正在尝试为我的家庭服务器网络平台制作一个简单的菜单，以支持多种屏幕分辨率。

Complete Example

#menu-area{
    position: absolute;
    text-align:center;
    margin-left: 15%;
    margin-right: 15%;
    width: 70%;
    min-height: 50px;
}

.menu-box{
    display:inline-block;
    height: 50px;
    width: 150px;
    
    font-size: 25px;
    line-height: 50px;
    text-align:center;
}

我的想法是，随着屏幕变窄，菜单链接会重新排列，并从一行变成一列。该部分按预期工作。

但是当菜单的垂直长度超过 2 行时，它开始与内容显示区域重叠。

我想不通，如何拉伸(stretch)包含菜单框的 div 来包含它们，这样内容区域就可以向下推而不与菜单重叠。

P.S.:如果可能的话，我只想为这个布局使用 html 和 css。

Answer 1

如果您在 CSS 中注释掉这些行 - 它有效:

#head {
/* min-height: 200px; */
/* height: 15%; */

#menu {
/* height: 50px; */

#menu-area {
/* position: absolute; */
/* min-height: 50px; */