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

本文详解如何通过嵌套 Flexbox 实现子元素自动拉伸填充父容器剩余垂直空间，核心在于为中间容器（.con）启用 display: flex + flex-direction: column，并为目标元素设置 flex-grow: 1。

本文详解如何通过嵌套 flexbox 实现子元素自动拉伸填充父容器剩余垂直空间，核心在于为中间容器（`.con`）启用 `display: flex` + `flex-direction: column`，并为目标元素设置 `flex-grow: 1`。

在现代 CSS 布局中，使用 Flexbox 实现“头部固定、主体自适应撑满剩余高度”是一种高频需求。但仅对顶层容器（如 .flex-container）应用 display: flex 并不够——关键在于让每一列容器（.con）自身也成为 Flex 容器，并采用垂直主轴布局。

以下是完整、可运行的解决方案：

.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;
  /* 不设 flex 属性，保持自然高度 */
}

.body {
  background: yellow;
  padding: 15px;
  flex-grow: 1;           /* ✅ 关键：占据所有剩余可用空间 */
}

⚠️ 注意事项：

• .con 必须具有明确的高度（如 height: 300px、min-height: 200px 或继承自父容器的约束），否则 flex-grow: 1 在无高度限制时可能无法生效；
• 若 .con 高度由内容撑开，则 .body 将仅在有足够剩余空间时才拉伸——此时建议配合 min-height: 0 或 overflow: hidden 防止意外溢出；
• 不要遗漏 flex-direction: column，否则 flex-grow 会在水平方向生效，无法实现垂直填满；
• 所有现代浏览器（Chrome 29+、Firefox 28+、Safari 9+、Edge 12+）均原生支持该写法，无需前缀。

此方案简洁、语义清晰，且完全基于标准 Flexbox 行为，避免了 position: absolute、calc() 或 JavaScript 动态计算等复杂替代方案，是响应式布局中的推荐实践。