通过 flexbox 布局，使子元素自动撑满父容器剩余垂直高度，并在内容超出时触发纵向滚动，全程无需 javascript，仅用纯 css 即可实现。
通过 flexbox 布局，使子元素自动撑满父容器剩余垂直高度，并在内容超出时触发纵向滚动，全程无需 javascript，仅用纯 css 即可实现。
要实现“子元素占满父容器全部可用垂直空间，且内容超长时自动显示纵向滚动条”，关键在于打破默认的文档流行为，转而使用现代 CSS 布局模型进行精确控制。纯 CSS 方案的核心是：父容器设为 display: flex + flex-direction: column，并明确限定其高度（如 height: 100vh 或 max-height: 100vh）；子元素设置 flex: 1 和 overflow: auto。
✅ 正确实现步骤
父容器必须有明确的高度约束
浏览器无法对无高度限制的元素计算“剩余空间”，因此 flex: 1 才能生效。推荐使用视口单位（如 height: 100vh）或 max-height（更灵活，避免强制拉伸）。-
父容器启用 Flex 布局并设为纵向排列
PigX UI 前端开发下载PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
.parent { display: flex; flex-direction: column; height: 100vh; /* 或 max-height: 100vh */ margin: 0; padding: 0; } -
子容器设为弹性伸展 + 溢出滚动
.child { flex: 1; /* 占据所有剩余空间 */ overflow-y: auto; /* 仅在 Y 轴启用滚动（推荐显式写法） */ -webkit-overflow-scrolling: touch; /* iOS 平滑滚动优化（可选） */ }
? 完整可运行示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Flex 自适应滚动容器</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: azure;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.parent {
display: flex;
flex-direction: column;
height: 100vh; /* 关键：定义父容器高度 */
background-color: lightcoral;
padding: 16px;
overflow: hidden; /* 防止父级意外溢出 */
}
.child {
flex: 1; /* 关键：撑满剩余空间 */
background-color: lightgreen;
padding: 16px;
overflow-y: auto; /* 关键：内容超长时纵向滚动 */
border-radius: 4px;
/* 可选：美化滚动条 */
scrollbar-width: thin;
scrollbar-color: #6c757d #e9ecef;
}
.child::-webkit-scrollbar {
width: 8px;
}
.child::-webkit-scrollbar-track {
background: #e9ecef;
border-radius: 4px;
}
.child::-webkit-scrollbar-thumb {
background-color: #6c757d;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="parent">
<h2>父容器（固定视口高度）</h2>
<p>此区域不参与滚动，仅作为头部固定内容</p>
<div class="child">
<h3>子容器（自动填满并滚动）</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<!-- 此处可粘贴任意长文本 -->
<p>重复多段 lorem 后，滚动条将自动出现，且子容器始终紧贴父容器底部，不留空白。</p>
</div>
</div>
</body>
</html>⚠️ 注意事项与常见误区
- ❌ 不要给 .child 设置 height: 100%：它依赖父级高度计算，但在 flex 布局中语义模糊，易失效；flex: 1 是标准、可靠的替代方案。
- ❌ 避免 min-height: 100vh 代替 height: 100vh：若内容极短，min-height 会导致父容器过高，子元素 flex: 1 仍会撑满——但此时并无滚动需求，反而造成底部大片留白。
- ✅ 响应式增强建议：对移动端，可结合 @media (max-width: 768px) 将 height: 100vh 改为 max-height: 80vh，防止地址栏遮挡。
- ✅ 无障碍友好：overflow-y: auto 比 scroll 更合理——仅在必要时显示滚动条，提升可访问性。
该方案已在 Chrome、Firefox、Safari（含 iOS）、Edge 等主流浏览器中稳定运行，是现代 Web 开发中实现「自适应高度 + 滚动容器」的标准实践。
