CSS实现flex三栏布局下左右div填充垂直剩余空间与中间等高

使用flex布局即可实现该需求，原有代码属性设置有误，调整后即可达到预期效果。

核心问题原因 #

Flex容器默认自带交叉轴拉伸对齐的特性，本身就可以实现子项等高效果，你额外给左右栏设置height: 100%反而导致样式失效：百分比高度需要父元素有明确固定的高度值才能生效，而你的父容器高度是由中间栏内容撑开的，没有预设固定高度，最终导致左右栏高度无法正确计算。

修正后完整代码 #

HTML结构（无需改动，保持原有结构即可） #

<div id="bigbox">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
</div>

CSS样式 #

#bigbox {
    display: flex;
    /* 块级flex容器默认宽度为父元素100%，如果有宽度适配需求可自行调整宽度属性 */
}
.left {
    width: 10%;
    background-color: red;
    /* 移除原有height: 100%设置，不设置高度即可触发自动拉伸规则 */
}
.mid {
    width: 80%;
    background-color: green;
    /* 高度可根据需求设置固定值，或完全由内容自动撑开，左右栏会自动适配高度 */
    min-height: 500px; /* 推荐用min-height代替固定height，适配内容动态增长的场景 */
}
.right {
    width: 10%;
    background-color: blue;
    /* 移除原有height: 100%设置 */
}

实现逻辑说明 #

• Flex布局的交叉轴默认对齐属性为align-items: stretch，当子项没有设置交叉轴方向（当前场景为垂直方向）的固定尺寸时，会自动拉伸至与容器内最高子项的高度一致。
• 该方案无需额外JS计算高度，也不需要使用定位、浮动等兼容性差、维护成本高的方案，中间栏不管是固定高度还是内容动态撑开，左右栏都能自动填充垂直空间，保持三栏高度完全一致。

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