本文详解如何在 flex 容器中，当子元素换行后自动限制其高度并启用按需滚动条，核心是结合 height: 100%、max-height: calc(100% - 固定高度) 与 overflow-y: auto 实现响应式高度约束。
本文详解如何在 flex 容器中，当子元素换行后自动限制其高度并启用按需滚动条，核心是结合 height: 100%、max-height: calc(100% - 固定高度) 与 overflow-y: auto 实现响应式高度约束。
在使用 Flexbox 布局时，一个常见但易被忽视的需求是：当容器启用 flex-wrap: wrap 且子元素因宽度不足而折行后，第二行的子元素需严格受限于剩余可用高度，并在内容溢出时显示滚动条。此时直接设置 overflow-y: scroll 往往无效——因为默认情况下该元素并未被赋予明确的高度约束，浏览器无法判断“何时溢出”。
关键在于：让换行后的子元素继承父容器高度，并减去第一行已占用的高度。这需要两个协同策略：
- 显式设定高度基准：将目标子元素（如 .right）的 height 设为 100%，使其初始高度拉满父容器（.dialog）的完整高度；
- 动态上限约束：用 max-height: calc(100% - Xpx) 精确扣除第一行子元素（如 .left）的固定高度（本例中为 300px），确保其最大高度 = 父高 − 左侧高度；
- 智能滚动触发：使用 overflow-y: auto（而非 scroll），仅在内容真实超出 max-height 时才显示滚动条，避免空滚动条干扰 UI。
以下是优化后的完整 CSS 示例：
.dialog {
background-color: cyan;
width: 500px;
height: 500px;
display: flex;
flex-wrap: wrap;
}
.left {
width: 300px;
height: 300px; /* 固定高度，作为 calc 减数依据 */
background-color: yellow;
}
.right {
width: 400px;
height: 100%; /* 拉伸至父容器全高，提供计算基础 */
max-height: calc(100% - 300px); /* 关键：动态上限 = 500px - 300px = 200px */
background-color: pink;
overflow-y: auto; /* 按需显示纵向滚动条 */
/* 可选：增强滚动体验 */
scrollbar-width: thin;
scrollbar-color: #6c6c6c #f0f0f0;
}<div class="dialog">
<div class="left">Left</div>
<div class="right">
Right content...<br>
<!-- 此处插入足够多内容以触发滚动 -->
Line 1<br>Line 2<br>...<br>Line 100
</div>
</div>⚠️ 重要注意事项：
- calc() 中的运算符（如 -）前后必须保留空格，否则语法错误（calc(100%-300px) 无效，calc(100% - 300px) 才正确）；
- 若 .left 高度非固定（如由内容撑开），需改用 CSS 自定义属性（--left-height）或 JavaScript 动态计算，calc() 本身不支持基于内容的变量；
- 在 flex-wrap: wrap 下，height: 100% 能生效的前提是父容器（.dialog）具有明确高度（本例中 height: 500px），否则百分比高度计算将退化为 auto；
- 如需兼容旧版浏览器，可添加 -webkit-overflow-scrolling: touch 提升 iOS 滚动流畅度。
此方案兼顾语义清晰性与布局鲁棒性，无需 JavaScript 干预，即可在响应式场景（如移动端横竖屏切换导致换行）下稳定工作，是现代 Flexbox 布局中控制溢出行为的推荐实践。
