如何在嵌套Flex容器中实现自适应剩余空间的滚动内容

要实现你需要的滚动效果，只需做两处关键修改：

1. 给页面根元素设置高度与flex布局，确保left-screen-container能获取明确的高度参考：

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

2. 调整scrollable-content的样式，添加滚动属性和最小高度约束：

.scrollable-content {
  flex: 1 1 auto;
  background-color: yellow;
  overflow-y: auto; /* 内容超出时触发垂直滚动 */
  min-height: 0; /* 允许flex子项在垂直布局下收缩，避免撑大容器 */
}

完整代码示例 #

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

.left-screen-container {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
  border: 1px solid black;
}

.screen-specific-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  border: 1px solid red;
}

.scrollable-content {
  flex: 1 1 auto;
  background-color: yellow;
  overflow-y: auto;
  min-height: 0;
}

.header {
  display: flex;
  padding: 7px 12px 7px 12px;
  background-color: green;
}

.footer {
  display: flex;
  justify-content: center;
  background-color: blue;
}

<div class="left-screen-container">
  <div class="screen-specific-content">
    <div class="header">头部区域</div>
    <div class="scrollable-content">
      <!-- 插入超长测试内容 -->
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
      <p>测试行内容</p>
    </div>
    <div class="footer">底部区域</div>
  </div>
</div>

核心逻辑说明 #

• 给html和body设置height:100%与display:flex，是为了让left-screen-container的flex-basis:100%有明确的高度参考，否则它会被内容无限撑开。
• min-height:0是解决问题的关键：在flex垂直布局（flex-direction:column）中，子项默认的min-height:auto会优先适配内容高度，导致容器被撑大。设置min-height:0后，子项会严格遵循flex分配的剩余空间，超出部分通过overflow-y:auto实现内部滚动。

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