本文详解如何通过嵌套 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 动态计算等复杂替代方案，是响应式布局中的推荐实践。
