如何使用 Flexbox 让子元素 .body 填满父容器的剩余高度

本文详解如何通过嵌套 Flexbox（父容器 + 子容器均设为 flex）配合 flex-direction: column 和 flex-grow: 1，使 .body 区域自动撑满 .con 容器的剩余垂直空间。

本文详解如何通过嵌套 flexbox（父容器 + 子容器均设为 flex）配合 `flex-direction: column` 和 `flex-grow: 1`，使 `.body` 区域自动撑满 `.con` 容器的剩余垂直空间。

在现代 CSS 布局中，Flexbox 是实现“头部固定、主体自适应填满剩余高度”这一常见需求最简洁可靠的方案。但需注意：仅对顶层容器设置 display: flex 并不够——.con 作为直接承载 .head 和 .body 的父级，也必须成为 flex 容器，并采用垂直主轴布局。

关键在于两层 Flexbox 协同：

• 外层 .flex-container 使用 display: flex 实现横向并排（三列布局）；
• 内层每个 .con 需额外声明 display: flex 与 flex-direction: column，将其子元素（.head + .body）沿垂直方向排列；
• 此时，给 .body 设置 flex-grow: 1，即可使其主动伸展，占据 .con 中除 .head 占用外的所有剩余高度。

以下是优化后的完整 CSS：

.flex-container {
  display: flex;
  gap: 10px;
  flex-direction: row;
  justify-content: flex-start;
}

.con {
  width: 33%;
  border: 1px solid #000;
  display: flex;          /* ✅ 启用 Flex 上下文 */
  flex-direction: column; /* ✅ 垂直排列子元素 */
  height: 300px;          /* 可选：为演示效果显式设高（实际项目中可由内容或上下文决定） */
}

.head {
  background: #eee;
  padding: 15px;
  /* .head 默认 flex-shrink: 1，高度由内容决定，不占满 */
}

.body {
  background: yellow;
  padding: 15px;
  flex-grow: 1;           /* ✅ 核心：吸收所有剩余空间 */
  /* 可选增强：防止内容溢出 */
  overflow-y: auto;
}

⚠️ 注意事项：

• 若 .con 本身无明确高度（如未设 height 或 min-height），其高度将由内容撑开，此时 .body 的 flex-grow: 1 仍有效，但“填满”的基准是 .con 的实际计算高度；
• 如需严格等高（尤其当各 .con 内容高度不一时），建议在外层 .flex-container 添加 align-items: stretch（默认值，通常无需显式声明）；
• 避免在 .body 上设置 height: 100% —— 在 flex 子项中它无效且可能破坏弹性行为；
• 若需兼容旧版浏览器（如 IE10/11），注意 gap 属性需配合 margin 模拟，且 flex-grow 行为在 IE 中存在细微差异，建议添加 -ms-flex-positive: 1 前缀。

此方案语义清晰、代码精简、响应性强，是构建卡片式布局、仪表盘面板或侧边栏内容区的理想实践。