本文详解如何在 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 响应式布局中的实用技巧。
