本文详解如何通过嵌套 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 前缀。
此方案语义清晰、代码精简、响应性强，是构建卡片式布局、仪表盘面板或侧边栏内容区的理想实践。
