通过 CSS Flexbox 的 align-items: stretch 特性，结合统一的 max-height 约束，可使右侧滚动区域动态匹配左侧内容高度，无需 JavaScript。
通过 css flexbox 的 `align-items: stretch` 特性，结合统一的 `max-height` 约束，可使右侧滚动区域动态匹配左侧内容高度，无需 javascript。
在构建双栏布局时，常遇到这样的需求：左侧区域高度由内容自然撑开，右侧区域需与之等高并支持垂直滚动（尤其当内容远多于左侧时）。但直接为右侧设置固定 height 会破坏响应性；而仅设 overflow-y: scroll 又无法触发滚动——因为默认情况下，Flex 子项会随父容器拉伸，但若父容器无明确高度限制，子项将无限扩展。
核心解法：利用 Flex 的拉伸行为 + 统一最大高度约束
Flex 容器（.parent）默认启用 align-items: stretch，这意味着子元素（.left 和 .right）会尝试填满交叉轴（此处为垂直方向）的可用空间。但“可用空间”取决于父容器的高度来源。若 .parent 本身高度未被限制，其高度将由子项中最高的那个决定（即左侧内容），此时右侧无法获得明确的滚动上下文。
✅ 正确做法是：为 .parent 或 .left 设置 max-height，同时确保 .right 共享同一 max-height 并启用 overflow-y: auto。这样：
-
.parent的高度上限被定义，从而为子项提供明确的拉伸基准； -
.left自然撑高（但不超过该上限）； -
.right被拉伸至相同高度，并因内容超长而触发滚动。
以下是优化后的完整 CSS 示例：
.header {
height: 50px;
border: 1px solid red;
}
.parent {
display: flex;
gap: 20px;
align-items: stretch;
max-height: calc(100vh - 50px); /* 减去 header 高度，确保整体不溢出视口 */
overflow: hidden; /* 防止 parent 自身出现滚动条 */
}
.left {
width: 50%;
/* 不设 height/max-height，由内容驱动，但受 parent 限制 */
}
.right {
width: 50%;
overflow-y: auto; /* 推荐 auto 而非 scroll，避免空滚动条 */
/* 不设 height，依赖 stretch 行为匹配 parent 的计算高度 */
}
/* 为 li 添加样式便于观察 */
.right li {
height: 100px;
background: #ffd1dc;
margin: 4px 0;
list-style: none;
}⚠️ 关键注意事项：
- 避免对
.right单独设置height: 100%—— 在 Flex 中这可能导致计算失效或循环依赖； -
max-height必须作用于.parent（推荐）或.left，二者选其一即可，但.parent更语义清晰且易于维护； - 使用
calc(100vh - Xpx)精确控制可用高度，避免因 header、margin 等导致底部截断； -
overflow-y: auto比scroll更友好：仅在内容溢出时显示滚动条； - 若需兼容旧版浏览器（如 IE10+），可添加
-ms-flex-align: stretch，但现代项目通常无需。
此方案纯 CSS 实现，零 JavaScript，性能优异，且完全响应式——无论左侧内容增减，右侧滚动区域始终精准对齐。
