本文讲解如何在 Flexbox flex-wrap: wrap 场景下，使第二行子元素自动适配剩余父容器高度并支持内容溢出时显示滚动条，关键在于结合 height: 100%、max-height: calc(100% - 固定高度) 与 overflow-y: auto。
本文讲解如何在 flexbox `flex-wrap: wrap` 场景下，使第二行子元素自动适配剩余父容器高度并支持内容溢出时显示滚动条，关键在于结合 `height: 100%`、`max-height: calc(100% - 固定高度)` 与 `overflow-y: auto`。
在使用 Flexbox 实现响应式多列布局（如对话框、侧边栏+主内容区）时，一个常见需求是：当子元素因宽度不足而换行至第二行后，该子元素应严格受限于父容器剩余可用高度，并在内容超长时提供垂直滚动能力。但直接设置 overflow-y: scroll 往往无效——这是因为 Flex 项默认不继承父容器高度，且 flex-wrap 下的换行项不会自动参与高度分配。
解决核心思路是：显式定义第二行子元素的高度基准（height: 100%），再通过 calc() 扣除第一行子元素占用的高度，最后启用智能滚动（overflow-y: auto）。
以下为完整、可复用的 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); /* 关键：减去 .left 的高度（注意空格！） */
background-color: pink;
overflow-y: auto; /* 推荐：仅在溢出时显示滚动条 */
}<div class="dialog">
<div class="left">Left</div>
<div class="right">
Right<br>Content<br>...<br>(long content here)
</div>
</div>✅ 关键要点说明：
- height: 100% 使 .right 初始高度匹配 .dialog 的 500px；
- max-height: calc(100% - 300px) 限制其最大高度为 500px - 300px = 200px，确保不侵占第一行空间；
- overflow-y: auto 比 scroll 更友好——无溢出时不显示滚动条，避免视觉干扰；
- calc() 中的空格不可省略（100%-300px ❌，100% - 300px ✅），否则语法错误导致样式失效；
- 若 .left 高度非固定（如由内容撑开），需改用 CSS 自定义属性或 JavaScript 动态计算，但本方案适用于大多数模态框、面板类场景。
? 进阶提示：
若需支持动态高度的首项，可结合 container queries（现代浏览器）或使用 grid 替代 flex-wrap 实现更可控的二维布局；但在兼容性优先项目中，上述 calc() 方案仍是简洁可靠的首选解法。
