本文介绍在 Flex 布局中，使右侧可滚动容器（.right）自动继承左侧内容容器（.left）动态高度的纯 CSS 解决方案，无需 JavaScript，兼容现代浏览器。
本文介绍在 flex 布局中，使右侧可滚动容器（`.right`）自动继承左侧内容容器（`.left`）动态高度的纯 css 解决方案，无需 javascript，兼容现代浏览器。
在响应式布局中，常需实现“左右并排、等高对齐、右侧可滚动”的效果：左侧区域根据内容自然撑开高度，右侧区域则需严格对齐其底部，并支持内部溢出滚动。难点在于——滚动容器（overflow-y: scroll）必须有明确的高度约束才能触发滚动条，但又不能写死 height（否则无法适配左侧动态变化的高度）。
核心思路：利用 Flex 的 align-items: stretch（默认行为） + 高度继承链控制
Flex 容器（.parent）默认将子项拉伸至最高子项的高度。因此，只要确保 .left 和 .right 都处于同一 Flex 上下文中，且 .parent 本身高度由 .left 决定（即 .left 不设 height，仅靠内容撑高），那么 .right 就能天然获得相同高度——此时只需为其添加 overflow-y: auto 即可启用滚动，而无需显式设置 height。
但问题在于：原始代码中 .right 缺少高度限制，导致其内容全部展开、不触发滚动；而若直接给 .right 设 height: 100%，在 Flex 中可能因计算上下文不明确而失效。
✅ 推荐解法：为父容器 .parent 设置 max-height（而非 .right 单独设）
.parent {
display: flex;
gap: 20px;
align-items: stretch; /* 默认值，确保子项等高 */
max-height: calc(100vh - 50px); /* 减去 .header 高度 */
overflow: hidden; /* 防止父容器自身溢出 */
}
.left {
width: 50%;
/* 不设 height，完全由内容决定高度 */
}
.right {
width: 50%;
overflow-y: auto; /* ✅ 关键：自动启用滚动 */
/* 不设 height/max-height —— 由 .parent 的 stretch 行为和 max-height 共同约束 */
}
/* 可选：增强滚动体验 */
.right::-webkit-scrollbar {
width: 8px;
}
.right::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 4px;
}
同时，确保 HTML 结构语义正确（.right 内部应使用合法列表结构）：
<div class="right">
<ul style="margin: 0; padding: 0;">
<li>1</li>
<li>2</li>
<!-- ... -->
<li>the last one</li>
</ul>
</div>
⚠️ 注意事项：
- 避免在
.right上设置height: 100%或固定height，这会破坏 Flex 的自然拉伸逻辑； -
max-height必须作用于.parent（或.left），才能让 Flex 主轴高度受控，进而约束.right； - 若页面存在其他浮动/定位干扰，需检查
.parent是否脱离文档流（如被position: absolute影响）； - 在 Safari 等旧版浏览器中，建议添加
-webkit-overflow-scrolling: touch提升滚动流畅度（移动端）。
此方案简洁、健壮、零 JS，完美契合现代 CSS 布局范式——用容器约束代替子项硬编码，让浏览器引擎自动完成高度同步与滚动判定。
