本文讲解在 flex-wrap: wrap 场景下，当第二个子元素因宽度超出而换行时，如何通过 height、max-height 与 calc() 精确控制其高度，并结合 overflow-y: auto 实现按需显示的垂直滚动条。
本文讲解在 `flex-wrap: wrap` 场景下，当第二个子元素因宽度超出而换行时，如何通过 `height`、`max-height` 与 `calc()` 精确控制其高度，并结合 `overflow-y: auto` 实现按需显示的垂直滚动条。
在使用 Flexbox 实现响应式布局（尤其是 flex-wrap: wrap）时，一个常见需求是：当子元素因容器宽度不足而折行后，位于第二行的子元素应自动适配剩余可用高度，并在内容溢出时显示滚动条。但默认情况下，Flex 子项不会自动约束高度——即使设置了 overflow-y: scroll，若未显式限制高度，滚动机制也不会生效。
关键在于：必须为换行子元素同时设置 height: 100% 与 max-height，且 max-height 需动态扣除第一行子元素所占高度。由于 Flex 容器在换行后仍保持整体高度（如 500px），而 .left 固定高 300px，因此 .right 的最大可用高度即为 500px − 300px = 200px。借助 CSS calc() 函数可实现这一动态计算：
.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%; /* 占满父容器高度（500px），作为基准 */ max-height: calc(100% - 300px); /* 关键：减去 .left 的固定高度 */ background-color: pink; overflow-y: auto; /* 推荐用 auto：仅内容溢出时显示滚动条 */ /* 注意：calc() 中运算符两侧必须有空格，否则语法错误 */ }<div class="dialog"> <div class="left">Left</div> <div class="right"> Right content here...<br> <!-- 添加足够多行文本以触发溢出 --> Lorem ipsum dolor sit amet... (重复至超过 200px 高度) </div> </div>✅ 注意事项与最佳实践：
- height: 100% 是必要前提——它使 max-height: calc(100% – Xpx) 有参照基准；仅设 max-height 而无 height，在 Flex 中可能失效；
- 使用 overflow-y: auto 而非 scroll，避免始终显示空白滚动条，提升用户体验；
- 若 .left 高度不固定（如由内容撑开），需改用 flex 属性 + min-height + max-height 组合，或借助 grid 替代 flex-wrap 实现更可控的二维布局；
- 在移动端竖屏等窄宽场景中，该方案能稳定保障 .right 区域可滚动，避免页面整体被拉长。
总结：Flexbox 的换行布局虽灵活，但高度约束需手动干预。通过 calc() 动态计算剩余空间，配合 height 与 overflow-y: auto，即可精准实现“按需滚动”，兼顾健壮性与语义清晰性。