通过 Flexbox 布局可实现子元素自动撑满父容器可用高度，并在内容溢出时触发垂直滚动，全程无需 JavaScript，仅需合理设置 display: flex、flex: 1 和 overflow: auto。
通过 flexbox 布局可实现子元素自动撑满父容器可用高度，并在内容溢出时触发垂直滚动，全程无需 javascript，仅需合理设置 `display: flex`、`flex: 1` 和 `overflow: auto`。
要让子元素（.child）完全占据父容器（.parent）的可用垂直空间，并在内容超出时自动启用垂直滚动，关键在于两点：
- 父容器必须具有明确的高度约束（如 height、max-height 或视口单位）；
- 使用 Flexbox 布局使子元素弹性伸展并接管剩余空间。
⚠️ 注意：若父容器高度未加限制（例如仅设 display: flex 但无 height/max-height），浏览器无法判断“可用空间边界”，导致 overflow: auto 不生效——这是常见误区。
✅ 正确做法如下：
.parent {
display: flex;
flex-direction: column; /* 显式声明更清晰（虽为默认值） */
max-height: 80vh; /* 关键：限定父容器最大高度 */
width: 70vw;
padding: 4px;
background-color: lightcoral;
}
.child {
flex: 1; /* 占据父容器所有剩余垂直空间 */
overflow-y: auto; /* 仅在垂直方向滚动（推荐显式指定） */
background-color: lightgreen;
}
<div class="parent">
<div class="child">
<!-- 长文本内容将自动填满高度，并在超出时滚动 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
</div>
? 最佳实践建议：
- 优先使用 max-height（如 max-height: 100vh 或 calc(100vh - 60px)）而非固定 height，以兼顾响应式与留白需求；
- 若父容器需自适应视口，可结合 vh 单位与 box-sizing: border-box 避免 padding 导致溢出；
- 子元素内避免设置 height: 100% —— 这会破坏 flex 弹性行为，flex: 1 已足够；
- 如需隐藏水平滚动条，可添加 overflow-x: hidden 到 .child；
- 在移动端注意添加 -webkit-overflow-scrolling: touch 提升滚动流畅度（可选优化）。
该方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge ≥ 12），纯 CSS 实现，语义清晰、性能高效，是构建弹窗内容区、侧边栏列表、聊天窗口等场景的标准解法。
