嵌套Flex布局丢失overflow:auto滚动特性的原因及无固定高度修复方案

先看原始正常实现：content 作为可滚动区域占满剩余高度的代码：

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

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  height: 100px;
  background-color: #f0f0f0;
}

.content {
  flex: 1;
  background-color: #ccc;
  padding: 20px;
  overflow-y: auto
}

.footer {
  height: 200px;
  background-color: #e0e0e0;
}

<div class="container">
  <div class="row header">
    Header Content Here
  </div>
  <div class="row content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <!-- 重复文本省略 -->
  </div>
  <div class="row footer">
    Footer Content Here
  </div>
</div>

为什么加wrapper后滚动特性丢失？ #

问题出在Flex布局的默认行为上：

• wrapper 是 .container 的flex子项，设置了 flex:1，理论上会占据 .container 的剩余高度。
• 但 wrapper 本身也是flex容器，Flex容器默认不会限制自身高度为父元素分配的空间，而是会被内部内容撑开。
• 这就导致 .content 的 flex:1 是基于 wrapper 被内容撑开后的高度计算的，而不是 .container 分配的剩余高度。所以 .content 会跟着内容无限增高，overflow-y:auto 自然不会触发滚动。

不添加显式高度的修复方法 #

给 wrapper 添加 min-height: 0 即可解决。这个属性会打破Flex容器的默认行为，强制它的高度被限制在父元素分配的空间内，内部的Flex布局就能正确计算剩余高度。

修复后的CSS代码：

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

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  height: 100px;
  background-color: #f0f0f0;
}

.content {
  flex: 1;
  background-color: #ccc;
  padding: 20px;
  overflow-y: auto
}

.footer {
  height: 200px;
  background-color: #e0e0e0;
}

.wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 添加这一行 */
}

对应的HTML结构不变：

<div class="container">
  <div class="row header">
    Header Content Here
  </div>
  <div class="wrapper">
    <div class="row content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <!-- 重复文本省略 -->
    </div>
  </div>
  <div class="row footer">
    Footer Content Here
  </div>
</div>

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