Flexbox嵌套Div溢出问题：如何限制滚动区域高度？

有一个包含可变数量元素的div，要求内容超出屏幕剩余高度时触发滚动，但实际内容溢出时，该div的高度会额外扩展出页面header的高度。需要调整设置，让溢出内容的div高度限制为父元素高度减去header高度，且header高度由内部内容决定，而非固定值。

问题核心在于错误的高度设置破坏了flex布局的剩余空间分配逻辑，修改以下几点即可解决：

• 移除.column-container的height:100%：它已经通过flex:1 1 auto占据.container的剩余空间，额外设置100%高度会导致其忽略header的高度，强制占满视口高度。
• 给.column添加flex:1：让列容器在.column-container内占满可用高度，保证内部元素能按flex column布局分配空间。
• 给.scroll-area添加flex:1：让滚动区域占据列容器内除顶部标题外的剩余高度，配合原本的overflow:auto，内容超出时自动触发滚动。
• 移除.header的固定height:100px：让header高度由内部内容自适应。

CSS #

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

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

.header {
  width: 100%;
  background-color: blue;
  display: flex;
}

.column-container {
  display: flex;
  flex-direction: row;
  background-color: red;
  flex: 1 1 auto;
}

.column {
  display: flex;
  flex-direction: column;
  width: 50%;
  flex: 1;
}

#col-a {
  background-color: green;
}

#col-b {
  background-color: orange;
}

.spacer {
  padding-top: 0px; /* 修改此值可触发溢出测试 */
}

.scroll-area {
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex: 1;
}

HTML #

<div class="container">
  <div class="header">
    <p>Header</p>
  </div>
  <div class="column-container">
    <div class="column" id="col-a">
      <p>Column A</p>
      <div class="scroll-area">
        <p>Scroll Area</p>
        <p class="spacer">End</p>
      </div>
    </div>
    <div class="column" id="col-b">
      <p>Column B</p>
    </div>
  </div>
</div>

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