Flex Column布局下子元素占剩余空间并实现滚动的最优方案

当flex容器设置flex-direction: column时，仅用flex-grow: 1无法让子元素稳定占据剩余空间——因为flex子元素默认min-height: auto，会被内部内容撑开，导致容器整体溢出。只需给需要占剩余空间的子元素添加min-height: 0，即可让它服从flex容器的空间分配，再配合内部滚动容器的设置就能实现需求，完全无需手动计算高度。

关键CSS调整 #

.flex-grow {
  flex-grow: 1;
  align-self: stretch;
  min-height: 0; /* 核心：取消默认的min-height:auto，让子元素可以被压缩 */
}

.scrollable {
  overflow-y: scroll;
  height: 100%; /* 占满父元素的可用高度 */
}

完整代码示例 #

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 300px;
  max-height: 300px;
}

.child {
  border: 1px solid #ccc;
  padding: 10px;
}

.flex-grow {
  flex-grow: 1;
  align-self: stretch;
  min-height: 0; /* 解决内容撑开父元素的问题 */
}

.scrollable {
  overflow-y: scroll;
  height: 100%;
}

HTML

<div class="container">
  <div class="child">Child 1</div>
  <div class="child flex-grow">
    <div class="scrollable">
      <div class="child">Child 2</div>
      <div class="child">Child 1</div>
      <div class="child">Child 1</div>
      <div class="child">Child 1</div>
      <div class="child">Child 1</div>
      <div class="child">Child 1</div>
      <div class="child">Child 1</div>
      <div class="child">Child 1</div>
      <div class="child">Child 1</div>
      <div class="child">Child 1</div>
    </div>
  </div>
</div>

原理说明 #

• flex布局在column方向下，子元素默认min-height: auto，这意味着子元素高度会被内部内容强制撑开，无视flex容器的空间限制。
• 设置min-height: 0后，子元素的最小高度不再受内容影响，会严格遵循flex-grow: 1分配的剩余空间。
• 内部滚动容器设置height: 100%后，会完全占满父元素的可用高度，内容超出时自动触发垂直滚动。

这种方法无需手动计算高度差，即使容器内有多个固定高度的子元素，只需给需要占剩余空间的元素添加flex-grow:1和min-height:0即可，适配所有动态场景。

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