通过 flexbox 布局，使子元素自动撑满父容器可用垂直高度，并在内容超出时触发垂直滚动，全程无需 javascript，纯 css 即可实现。
通过 flexbox 布局，使子元素自动撑满父容器可用垂直高度，并在内容超出时触发垂直滚动，全程无需 javascript，纯 css 即可实现。
要实现“子元素占满父容器全部可用垂直空间，且内容超长时自动出现垂直滚动条”，关键在于明确父容器的高度约束与合理利用 Flexbox 的弹性分配机制。许多开发者误以为仅设置 height: 100% 或 flex: 1 就能生效，但若父容器自身高度未被限制（例如未定义 height、max-height 或未继承视口约束），浏览器无法判定“何时开始溢出”，导致 overflow: auto 失效。
✅ 正确做法如下：
- 为父容器设置明确的高度上限：推荐使用 max-height（如 max-height: 100vh）或固定高度（如 height: 500px）。max-height 更灵活，尤其适合响应式场景；若需严格占满视口剩余空间，可结合 calc() 或 vh 单位。
- 启用 Flex 布局并设为列方向：display: flex; flex-direction: column;
- 子元素设为弹性伸展 + 溢出处理：flex: 1; overflow: auto; —— flex: 1（即 flex: 1 1 0）使其优先吸收父容器剩余空间，overflow: auto 在内容超出分配区域时显示滚动条。
以下是完整、可直接运行的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自适应高度+垂直滚动</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
padding: 20px;
}
.parent {
display: flex;
flex-direction: column;
max-height: 70vh; /* 关键：限定父容器最大高度 */
background-color: #ff6b6b;
border-radius: 8px;
overflow: hidden; /* 防止父级意外溢出 */
margin-bottom: 24px;
width: 80vw;
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.child {
flex: 1; /* 关键：占据所有剩余空间 */
overflow-y: auto; /* 仅在 Y 轴启用滚动 */
padding: 16px;
background-color: #d5f5e3;
border-radius: 0 0 8px 8px;
/* 可选：美化滚动条 */
scrollbar-width: thin;
scrollbar-color: #4caf50 #e0e0e0;
}
.child::-webkit-scrollbar {
width: 8px;
}
.child::-webkit-scrollbar-track {
background: #e0e0e0;
border-radius: 4px;
}
.child::-webkit-scrollbar-thumb {
background-color: #4caf50;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<h3>✅ 自动填充 + 滚动就绪</h3>
<p>此区域将始终填满父容器的可用垂直空间。当内容超出（如本段大量文本），滚动条自动出现。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<!-- 此处可插入更长文本以触发滚动 -->
<p>（为简洁起见，此处省略重复段落；实际使用中可自由填充任意长度内容）</p>
</div>
</div>
</body>
</html>⚠️ 注意事项：
- ❌ 避免仅对父容器设 height: 100% 而不提供祖先高度约束（如 html, body 未设 height: 100%），否则高度计算链断裂，flex: 1 无效；
- ✅ 推荐用 max-height: 100vh 或 max-height: calc(100vh - Xpx) 替代固定 height，兼顾兼容性与响应性；
- ✅ 若父容器内含多个兄弟元素（如标题+内容区），确保其他元素高度可预测（如固定 height 或 flex-shrink: 0），避免挤压子容器空间；
- ? 在移动端需额外测试 touch-action: pan-y 或 -webkit-overflow-scrolling: touch（iOS Safari 旧版）以保障滚动流畅性（现代浏览器通常无需）。
总结：该方案是现代 CSS 布局的经典实践——以 flex: 1 + overflow: auto 为核心，辅以明确的高度上下文，零 JS、高兼容、语义清晰，适用于管理面板、聊天窗口、文档预览等需“动态占满+安全滚动”的典型场景。
