在 flex 布局中，当子元素因换行（如响应式场景）进入第二行时，可通过 height: 100% + max-height: calc(100% - 固定高度) + overflow-y: auto 组合，使该子元素自动适配剩余空间并启用按需滚动。
在 flex 布局中，当子元素因换行（如响应式场景）进入第二行时，可通过 height: 100% + max-height: calc(100% - 固定高度) + overflow-y: auto 组合，使该子元素自动适配剩余空间并启用按需滚动。
在使用 Flexbox 构建多区域布局（例如对话框、侧边栏+主内容区）时，一个常见需求是：当子元素因 flex-wrap: wrap 换行至第二行后，其高度应严格受限于父容器剩余可用高度，并在内容溢出时显示滚动条——而非撑高整个容器或被截断。
核心思路在于脱离文档流的高度计算依赖：由于 .right 在换行后不再与 .left 同行排列，它将独占第二行，此时它的可用垂直空间即为父容器总高度减去第一行中已占用的高度（本例中 .left 高度为 300px）。直接设置 height: 100% 会使元素尝试拉伸至父容器全高（500px），但需进一步约束其上限。
✅ 正确做法如下：
- 为 .right 设置 height: 100%，使其基础高度继承父容器；
- 使用 max-height: calc(100% - 300px) 精确限制其最大高度为「父高减去第一行元素高度」；
- 设置 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; /* 按需显示滚动条 */
/* 可选：增强滚动体验 */
scrollbar-width: thin;
scrollbar-color: #666 #f0f0f0;
}
/* 兼容 WebKit 浏览器的滚动条样式 */
.right::-webkit-scrollbar {
width: 8px;
}
.right::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 4px;
}
.right::-webkit-scrollbar-thumb {
background: #666;
border-radius: 4px;
}<div class="dialog">
<div class="left">Left</div>
<div class="right">
Right content...<br>
<!-- 此处添加足够多内容以触发滚动 -->
Lorem ipsum dolor sit amet... (重复至超过 200 行)
</div>
</div>⚠️ 注意事项：
- 该方案要求第一行中“占用高度”的元素（如 .left）具有明确且固定的高度值（如 px、rem），不适用于 min-height 或 flex-grow 动态分配高度的场景；
- 若布局存在响应式变化（如 .left 高度随屏幕尺寸改变），建议配合 CSS 自定义属性（--left-height）与 calc() 联用，或改用 grid 布局实现更稳健的轨道控制；
- 在移动端 Safari 中，overflow-y: auto 对 flex 子项的支持偶有兼容性问题，可追加 -webkit-overflow-scrolling: touch 提升触控滚动流畅度（仅限 iOS
- 若父容器高度本身由内容撑开（非显式 height），此方案失效——请确保 .dialog 具备确定的高度上下文（如 vh、固定像素或 max-height）。
总结：Flexbox 本身不提供“剩余空间分配”语义，但通过 calc() 结合百分比与固定值，可精准模拟该行为。这是在保持 Flex 布局简洁性的同时，实现复杂流式滚动容器的实用技巧。
