本文详解如何通过嵌套 Flexbox 布局，使 .body 区域自动伸展并填满其父容器 .con 的剩余垂直空间，无需固定高度或 JavaScript，纯 CSS 实现响应式高度分配。
本文详解如何通过嵌套 flexbox 布局，使 `.body` 区域自动伸展并填满其父容器 `.con` 的剩余垂直空间，无需固定高度或 javascript，纯 css 实现响应式高度分配。
在 Flexbox 布局中，让某个子元素（如 .body）“撑满父容器剩余高度”，关键在于将父容器设为 flex 容器，并启用主轴方向的弹性分配。原始代码中，.flex-container 是 flex 容器，但其直接子元素 .con 仍是普通块级元素——这意味着 .con 内部的 .head 和 .body 无法参与弹性高度分配。
✅ 正确解法是：对每一层需要高度控制的容器都启用 Flexbox。具体步骤如下：
将 .con 设为 display: flex 且 flex-direction: column
这使其子元素（.head 和 .body）沿垂直方向排列，并形成弹性上下文。为 .body 添加 flex-grow: 1
表示该元素主动吸收父容器中未被其他子元素占用的剩余空间。（可选）添加 flex-shrink: 0 到 .head 防止其被压缩（尤其当内容过多时），增强健壮性。
以下是优化后的完整 CSS 示例：
.flex-container {
display: flex;
gap: 10px;
flex-direction: row;
justify-content: flex-start;
/* 推荐：设置最小高度，确保 flex 基准存在 */
min-height: 300px; /* 或 inherit / 100vh 等 */
}
.con {
width: 33%;
border: 1px solid #000;
display: flex; /* ✅ 启用 flex 上下文 */
flex-direction: column; /* ✅ 垂直主轴 */
height: 100%; /* ✅ 确保高度继承（尤其嵌套时） */
}
.head {
background: #eee;
padding: 15px;
flex-shrink: 0; /* ✅ 防止被压缩，保持内容高度 */
}
.body {
background: yellow;
padding: 15px;
flex-grow: 1; /* ✅ 核心：填充所有剩余空间 */
}
? 注意事项：
- 若 .con 本身没有明确高度（如未设 height 或 min-height），其高度可能由内容决定，导致 flex-grow: 1 无效。建议为 .flex-container 或 .con 设置最小高度（如 min-height: 300px 或 height: 100vh）。
- flex-grow: 1 仅在父容器为 flex 容器且主轴为垂直方向（flex-direction: column）时才作用于高度分配。
- 不要遗漏 flex-direction: column —— 默认 row 方向只会横向拉伸，对高度无影响。
- 在现代浏览器中兼容性极佳（Chrome 29+, Firefox 28+, Safari 9+, Edge 12+）。
通过这一嵌套 Flexbox 模式，你不仅能精准控制 .body 的高度行为，还能轻松扩展为多区域布局（如 header / main / footer），是构建响应式卡片、仪表盘面板或侧边栏布局的可靠基础方案。
