可滚动flex列导致文档高度超出100%出现双滚动条问题咨询

问题原因 #

这是flex纵向布局的经典高度计算问题：

• 外层flex容器总高度为视口100%，第二行容器设置的height: 100%是相对于外层flex容器的总高度计算的，叠加第一行的固有高度后，总高度超过视口高度，导致页面出现多余滚动条。
• flex子元素默认min-height: auto的特性会让容器被内部内容撑开，即使设置了高度限制也可能失效。

解决方案 #

仅需修改两处样式即可解决：

1. 外层flex的第二行容器（绿色背景）去掉height: 100%，新增flex: 1和min-height: 0：flex:1会让它自动填充第一行之外的所有剩余视口高度，min-height:0强制容器不被内部内容撑开。
2. 黄色滚动列的现有样式无需修改，它的height:100%会相对于已经被限制高度的父容器计算，溢出内容只会在黄色列内滚动，不会撑高整个页面。

修改后的完整代码 #

<html style="height: 100%;">
<body style="height: 100%; padding: 0; margin: 0;">
   <div style="display: flex; flex-direction: column; height: 100%;">
      <div style="background-color: gray">
         Content 1
      </div>
      <div style="display: flex; background-color: green; flex:1; min-height:0;">
         <div style="background-color: blue;">
            Content 2.1
         </div>
         <div style="background-color: yellow; height: 100%; overflow-y: auto;">
            Content 2.2<br />
            Content 2.2<br />
            <!-- 原有重复内容保持不变 -->
            Content 2.2
         </div>
      </div>
   </div>
</body>
</html>

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