Flexbox问题：如何在已有flex-grow容器内实现子元素flex-grow生效

你的问题核心在于**.main-content未设置为Flex容器**，导致内部的.test无法通过flex-grow:1填充父容器高度；同时固定定位的头部、底部对应的外边距值也需要调整，避免内容被遮挡。

修改后的完整代码 #

HTML

<div class="app-container">
    <div class="header">header</div>
    <main class="main-content bg-light">
        <div class="test">Foo</div>
    </main>
    <div class="footer">footer</div>
</div>    

CSS

.app-container {
    display        : flex;
    flex-direction : column;
    min-height     : 100vh;
    background-color: lightgrey;
    margin: 0; /* 移除浏览器默认外边距，避免多余滚动条 */
}

.header {
    position : fixed;
    top      : 0;
    width    : 100%;
    z-index  : 1000;
    background-color: blue;
    height: 30px;
}

.footer {
    position : fixed;
    bottom   : 0;
    width    : 100%;
    z-index  : 1000;
    background-color: red;
    height: 15px;
}

.main-content {
    margin-top    : 30px; /* 与header高度匹配，避免内容被遮挡 */
    margin-bottom : 15px; /* 与footer高度匹配，避免内容被遮挡 */
    overflow      : auto;
    flex-grow     : 1;
    display: flex; /* 关键：将.main-content设为Flex容器 */
    flex-direction: column; /* 保持垂直布局方向 */
}

.test {
    background-color: lightsalmon;
    flex-grow: 1; /* 现在可填充.main-content的剩余高度 */
}

关键调整说明 #

1. 给.main-content添加display: flex和flex-direction: column，让它成为Flex容器，内部子元素的flex-grow属性才能生效。
2. 修正.main-content的外边距值，使其与固定头部、底部的高度一致，确保内容区域不被遮挡。
3. 给.app-container添加margin:0，消除浏览器默认的body外边距，避免出现不必要的滚动条。

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