Flexbox布局外层滚动条产生原因及正确实现方案咨询

外层滚动条产生原因 #

• 所有flex项都配置了flex: 1 0 auto，其中第二个参数flex-shrink: 0代表flex项不会被父容器压缩，会优先保留自身的基础高度
• 第二个flex子项额外设置了height: 100%，这个高度继承自父容器的100%视口高度，再叠加第一个"something"模块的内容高度，两个子项总高度已经超过父容器的视口高度，flex-shrink: 0禁止压缩的情况下自然就撑出了外层滚动条
• 虽然内部黑色容器加了overflow: auto，但它的父容器已经被内容撑得超出视口，内部滚动规则不会触发，溢出的高度全部累计到最外层容器上

正确实现方式 #

如果要实现「顶部模块自适应内容高度、下方区域占满剩余视口空间、内容超出时内部出滚动条」的布局，只需要做两处核心修改：

1. 把需要占满剩余空间的flex项的flex-shrink改为1，也就是把flex: 1 0 auto调整为flex: 1 1 auto，不需要占满剩余空间的顶部固定模块设置为flex: 0 0 auto即可
2. 给下方占满剩余空间的flex父项添加min-height: 0，这是flex列布局的经典规则：flex项默认min-height: auto，会优先被内部内容撑高，设置为0后才会严格服从flex分配的高度

修正后的代码示例 #

<!-- 注意使用前需要先给html、body设置 height: 100%; margin: 0; 否则父容器高度不会生效 -->
<div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
    <!-- 顶部模块，自适应内容高度，不参与空间分配 -->
    <div style="flex: 0 0 auto;">
      <div>something</div>
    </div>

    <!-- 下方占满剩余空间的模块，允许收缩，配置min-height限制最大高度 -->
    <div style="flex: 1 1 auto; min-height: 0;">
      <div style="display: flex; width: 100%; height: 100%;">
        <!-- 内部滚动容器，高度继承父容器分配的剩余空间，超出自动出滚动条 -->
        <div style="flex: 1 1 auto;overflow: auto; background-color: black; color: #fff;">
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
          <p>x</p>
        </div>
      </div>
    </div>
</div>

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