如何在 Flexbox 布局中为换行后的子元素设置自适应高度与滚动条

本文详解如何在 flex-wrap: wrap 场景下，使换行的 Flex 子项（如右侧区域）自动适配剩余父容器高度，并在内容溢出时启用垂直滚动条，兼顾响应性与用户体验。

本文详解如何在 `flex-wrap: wrap` 场景下，使换行的 flex 子项（如右侧区域）自动适配剩余父容器高度，并在内容溢出时启用垂直滚动条，兼顾响应性与用户体验。

在使用 Flexbox 实现多列布局（尤其是配合 flex-wrap: wrap 的响应式场景）时，一个常见需求是：当子元素因宽度不足而折行到第二行后，其高度应严格受限于父容器剩余可用空间，并在内容超长时显示滚动条——而非撑开父容器或导致布局错乱。

但直接对 .right 设置 height: 100% 在 flex-wrap 下通常无效，因为 Flex 项默认不继承父容器在“交叉轴”（cross-axis）上的剩余空间；且当 .left 占据固定高度（如 300px）后，.right 若无显式约束，会按自身内容自然伸展，失去滚动控制能力。

✅ 正确解法是结合 百分比高度 + calc() 动态减法 + overflow-y: auto：

• 首先确保父容器 .dialog 具有明确的高度（如 500px），并启用 display: flex; flex-wrap: wrap;；
• .left 保持固定尺寸（如 width: 300px; height: 300px）；
• .right 则需同时满足：
  • height: 100%：使其尝试拉伸至父容器全高（为 calc() 提供计算基准）；
  • max-height: calc(100% – 300px)：精确扣除 .left 的高度，限定最大可用高度；
  • overflow-y: auto：仅在内容真正溢出时显示滚动条（比 scroll 更友好）；
  • 注意：calc() 中运算符两侧必须保留空格（calc(100% – 300px) ✅，calc(100%-300px) ❌）。

以下是完整、可运行的 CSS 示例：

.dialog {   background-color: cyan;   width: 500px;   height: 500px;   display: flex;   flex-wrap: wrap; }  .left {   width: 300px;   height: 300px;   background-color: yellow; }  .right {   width: 400px;   height: 100%;           /* 关键：触发百分比计算上下文 */   max-height: calc(100% - 300px); /* 关键：动态预留左侧高度 */   background-color: pink;   overflow-y: auto;       /* 推荐：按需显示滚动条 */   /* 可选增强体验 */   overscroll-behavior-y: contain; /* 防止滚动穿透 */ }

<div class="dialog">   <div class="left">Left</div>   <div class="right">     Right content...<br>     ...repeated to exceed 200px height<br>     ...so scrollbar appears.   </div> </div>

⚠️ 注意事项：

• 该方案依赖 .left 高度固定且已知。若 .left 高度动态变化（如由内容决定），需改用 CSS Grid 或 JavaScript 动态计算；
• flex-wrap: wrap 下，Flex 项的“主轴”为水平方向，因此第二行元素的“交叉轴”即垂直方向，height/max-height 在此生效；
• 若需支持更复杂的响应式断点（如不同屏幕下 .left 高度变化），可配合 CSS 自定义属性（–left-height）与 @media 查询提升可维护性；
• 测试时建议在真实移动设备或 DevTools 设备模拟器中验证 portrait 模式下的换行与滚动行为。

总结：通过 height: 100% + max-height: calc(100% – Xpx) + overflow-y: auto 这一组合，即可在 Flexbox 换行布局中精准控制子项高度与滚动行为，无需 JavaScript，语义清晰、性能优异，是现代 CSS 响应式布局中的实用技巧。