如何在CSS中让flex子项占满剩余空间并支持内部滚动？-css教程-PHP中文网

让flex子项占满剩余空间并支持内部滚动，核心做法是设置父容器为 display: flex 且高度固定（如 100vh），子项使用 flex: 1 1 0% 或 min-height: 0 配合 overflow: auto。这样能强制子项在主轴方向收缩到内容大小，同时允许其溢出时出现滚动条。

如何在CSS中让flex子项占满剩余空间并支持内部滚动？

为什么默认Flex布局不支持内部滚动？

默认情况下，Flex子项的 min-width 和 min-height 属性值为 auto。这意味着子项永远不会比其内容更小。如果父容器高度有限，而子项内容很多，子项会撑大父容器，导致整个页面滚动而不是子项内部滚动。要解决这个问题，必须显式覆盖这个默认行为。

如何在CSS中让flex子项占满剩余空间并支持内部滚动？

<div class="parent">
  <div class="child">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
    <p>Line 4</p>
    <p>Line 5</p>
  </div>
</div>

预期结果：父容器高度为 200px，子项高度也为 200px，子项内部出现垂直滚动条，父容器不滚动。

如何确保子项正确计算剩余空间？

在使用 flex: 1 时，需要确保子项的初始尺寸计算正确。对于 flex-direction: column 的父容器，子项的 flex-basis 默认为 auto，这可能导致计算偏差。建议显式设置 flex-basis: 0 或使用 min-height: 0。这样可以确保子项从 0 开始增长，填满剩余空间。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如何在CSS中让flex子项占满剩余空间并支持内部滚动？

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.child {
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
}

预期结果：子项占据父容器所有剩余高度，内容超出时内部滚动。

当子项包含固定头部时如何处理？

如果子项内部有固定头部和内容区域，可以使用嵌套Flex布局。外层子项保持 flex: 1，内部再分为头部和内容区。内容区设置 overflow: auto，头部设置 flex-shrink: 0 防止被压缩。

<div class="parent">
  <div class="child">
    <div class="header">Header</div>
    <div class="content">
      <p>Content Line 1</p>
      <p>Content Line 2</p>
      <p>Content Line 3</p>
      <p>Content Line 4</p>
      <p>Content Line 5</p>
    </div>
  </div>
</div>

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.child {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
}

.header {
  flex-shrink: 0;
  background: #f0f0f0;
  padding: 10px;
}

.content {
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
}

预期结果：头部固定不动，内容区域占据剩余空间并支持内部滚动。