如何让子flex容器占满父flex容器高度？新手技术求助

问题出在：使用height:100%时，父元素必须有明确的高度值，否则子元素没法算出100%对应的实际高度。你的.container是inline-flex元素，它的高度默认由内部内容撑开，没有明确高度，所以.menu-container的height:100%完全不起作用。

给你两种靠谱的解决办法：

办法一：给父容器设明确高度 #

如果想让.container占满整个浏览器窗口高度，给它加height:100vh（vh是视口高度单位，100vh就是浏览器窗口的高度）：

.container{
    width: 100%;
    display: inline-flex;
    justify-content: center;
    height: 100vh; /* 添加这行 */
}

另外，为了避免html和body的默认边距影响布局，最好补上：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

办法二：用Flex布局的自动拉伸特性 #

既然.container是flex容器，直接给它设置align-items: stretch（这其实是flex容器的默认值，显式写出来更保险），然后删掉.menu-container的height:100%——flex子项会自动拉伸填满父容器的高度：

.container{
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: stretch; /* 确保子项拉伸 */
}

.menu-container{
    /* 移除 height:100%; */
    width: 80%;
    display: inline-flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

这种方法更贴合Flex布局的设计逻辑，不用依赖百分比高度的继承链，更稳定。

另外注意你的媒体查询里给.container设了height:fit-content，小屏幕下如果不需要占满高度，这个设置可以保留，不影响桌面端效果。

内容的提问来源于stack exchange，提问作者HazemWasfy