通过 Flexbox 布局配合 flex: 1 和 overflow: auto，可使子元素自动填充父容器剩余高度，并在内容溢出时触发平滑垂直滚动，全程无需 JavaScript。
通过 flexbox 布局配合 `flex: 1` 和 `overflow: auto`，可使子元素自动填充父容器剩余高度，并在内容溢出时触发平滑垂直滚动，全程无需 javascript。
要实现“子元素占满父容器全部可用垂直空间，且内容超限时自动启用垂直滚动”，核心在于约束父容器高度并利用 Flexbox 的弹性分配机制。纯 CSS 方案完全可行，关键有三点：
- 父容器必须具有明确的高度边界（如 height、max-height 或视口单位 vh），否则浏览器无法判断“何时开始溢出”；
- 父容器设置 display: flex + flex-direction: column，使其成为弹性容器；
- 子元素设置 flex: 1（等价于 flex: 1 1 0），表示它将尽可能伸展以填满父容器剩余空间；同时添加 overflow: auto，确保内容超出时显示滚动条。
以下是推荐的最小可行样式方案：
.parent {
display: flex;
flex-direction: column;
max-height: 100vh; /* 或 80vh、calc(100vh - 60px) 等具体值 */
width: 100%;
/* 可选：重置默认边距与盒模型 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
.child {
flex: 1;
overflow: auto;
/* 可选：增强滚动体验 */
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}
对应 HTML 结构保持简洁：
<div class="parent">
<div class="child">
<!-- 大量文本或动态内容 -->
Lorem ipsum dolor sit amet...（内容可任意长）
</div>
</div>
✅ 优势说明：
- 完全响应式：结合 vh 单位可适配不同屏幕高度；
- 自动适应：父容器高度变化（如 sidebar 展开/收起）时，子元素会实时重新分配空间；
- 语义清晰：无需绝对定位或 JS 计算高度，结构与样式职责分离；
- 兼容性好：Flexbox 在现代浏览器中支持完善（IE11+ 需加 -ms- 前缀，但 flex: 1 基本可用）。
⚠️ 注意事项：
- ❌ 避免对 .child 设置 height: 100% —— 这会导致高度计算失效，滚动失效；
- ❌ 不要遗漏 flex-direction: column（父容器默认为 row）；
- ✅ 若父容器需容纳多个子元素（如标题 + 内容区），可将 .child 设为 flex: 1，其余兄弟元素设为固定高度或 flex: 0 0 auto，Flexbox 会自动为其预留空间；
- ✅ 滚动条样式可通过 ::-webkit-scrollbar 自定义（仅 WebKit 浏览器），如需跨平台统一外观，建议使用轻量级 JS 库（如 simplebar），但非必需。
该方案已在实际项目中广泛验证，适用于仪表盘面板、聊天窗口、文档预览区等典型场景，兼顾简洁性、可维护性与性能表现。
