子元素自动填充父容器剩余高度技巧

本文深入解析了如何利用 CSS Flexbox 的 `flex: 1` 与 `flex-direction: column` 组合，让子元素智能、自动地填充父容器中扣除固定高度兄弟元素后的剩余垂直空间，彻底摆脱繁琐易错的 `calc()` 计算或侵入式 JavaScript 脚本；通过清晰的代码示例和典型错误对比（如 `height: 100%` 导致的溢出问题），直观展示了该方案在布局稳定性、响应性与可维护性上的显著优势，并延伸至三栏布局、卡片结构等高频场景，是现代前端开发中高效解决动态高度分配问题的必备技巧。

使用 CSS Flexbox 的 `flex: 1` 配合 `flex-direction: column`，可让动态子元素自动占据父容器中除去固定尺寸兄弟元素后的剩余垂直空间，无需硬编码 `calc()` 或 JS 计算。

在传统块级布局中，当父容器高度固定且包含多个子元素时，若一个子元素设为 height: 100%，它会尝试占满整个父高，而忽略其他兄弟元素所占空间，最终导致溢出或布局错乱——正如问题中橙色 .inner-main-dynamic-size 被紫色 .inner-top-fixed-size 推出红色父容器的情况。

推荐解法：Flexbox 布局（现代、语义清晰、响应友好）
将父容器设为 display: flex 并指定 flex-direction: column，使其子元素沿垂直方向堆叠；再对需自适应的子元素应用 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0），即可让它自动拉伸并填满所有剩余可用高度。

✅ 正确示例代码：

.outer-fixed-size {
  width: 400px;
  height: 100px;
  background-color: #ff6b6b; /* 红色 */
  padding: 5px;
  box-sizing: border-box;
  display: flex;           /* 启用 Flexbox */
  flex-direction: column;  /* 垂直排列子项 */
}

.inner-top-fixed-size {
  height: 50px;
  width: 100%;
  background-color: #8a5cf6; /* 紫色 */
}

.inner-main-dynamic-size {
  flex: 1;                 /* 关键：自动填充剩余空间 */
  width: 100%;
  background-color: #ffa500; /* 橙色 */
}

<div class="outer-fixed-size">
  <div class="inner-top-fixed-size"></div>
  <div class="inner-main-dynamic-size"></div>
</div>

? 注意事项与最佳实践：

• flex: 1 依赖于父容器的明确高度（如本例中的 height: 100px），若父高由内容撑开，则需额外约束（例如 min-height 或 max-height）。
• 避免混用 height: 100% 和 flex: 1 在同一子元素上——前者在 Flex 容器中可能失效或产生冲突。
• 如需支持极老浏览器（IE9 及以下），可考虑 position: absolute + top/bottom 方案，但维护性差、缺乏弹性，不推荐新项目使用。
• 若存在多个可伸缩子元素，flex: 1 会按比例分配剩余空间；如需不均等分配，可分别设置 flex: 2、flex: 1 等。

掌握这一模式后，你还能轻松扩展实现三栏布局（顶部/底部固定 + 中间滚动）、卡片内标题+内容+操作区等常见 UI 结构，真正实现“写一次，适配多种尺寸”。

今天关于《子元素自动填充父容器剩余高度技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！