本文讲解如何在全高 Flex 容器中，让内部 元素在内容超长时自动启用垂直滚动，同时严格限制其高度不超出父级 .col 的可用空间。核心方案是结合 calc() 动态计算剩余高度，并配合 flex: 1 与 overflow-y: scroll 实现响应式滚动容器。
本文讲解如何在全高 flex 容器中，让内部 `
在现代 CSS 布局中，使用 display: flex 构建全高（full-height）页面结构非常常见，但当某一部分（如侧栏中的文章区域）内容动态增长时，常面临“高度溢出、破坏布局”的问题。理想行为是：.col 保持 100% 父容器高度，其内部
关键在于——不能简单设置 height: 100% 给
以下为推荐实现方案：
✅ 核心 CSS 规则
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrap, .container, .content, .columns, .col {
display: flex;
flex-direction: column;
height: 100%;
}
.col {
border: 10px solid black;
width: 33.3333%;
font-family: monospace;
}
/* 关键：为 article 设置可滚动的自适应高度 */
article {
flex: 1; /* 占据剩余空间（配合父级 flex: 1）*/
overflow-y: auto; /* 推荐用 auto 而非 scroll，避免空滚动条 */
height: calc(100vh - 174px); /* 动态减去 header + footer + padding + borders */
}
? 高度计算说明（以示例为准）：
100vh（整个视口）
− 64px（.content 的 padding-top）
− 15px（高度，含行高/内边距）
− 15px（
✅ 替代方案：纯 Flex 驱动（推荐进阶使用）
若允许微调 HTML 结构，可将 .b 设为 Flex 容器，完全交由 Flex 分配空间，彻底规避 calc() 手动计算：
.b {
display: flex;
flex-direction: column;
flex: 1; /* 让 .b 占满 .col 剩余高度 */
}
.b > header,
.b > footer {
flex: 0 0 auto; /* 不伸缩，尺寸由内容决定 */
}
.b > article {
flex: 1; /* 自动填充中间空白 */
overflow-y: auto; /* 滚动启用 */
}
此时无需 calc()，语义清晰、响应性强，且适配不同屏幕尺寸。
⚠️ 注意事项
- overflow-y: scroll 会始终显示滚动条轨道（即使未滚动），建议使用 overflow-y: auto 提升体验；
- box-sizing: border-box 必须全局启用，否则边框/内边距会额外增加尺寸，导致计算偏差；
- 若项目需支持旧版浏览器（如 IE11），calc() 中避免混合单位（如 100vh - 1em），并确保语法正确；
- 移动端需添加 touch-action: pan-y 到 article 以保障原生滚动流畅性；
- 使用 vh 单位时注意 Safari iOS 的 100vh 行为异常（地址栏隐藏/显示影响），生产环境建议搭配 JavaScript 动态修正或改用 100dvh（现代浏览器支持）。
通过上述方法，你既能保持 Flex 布局的简洁性与弹性，又能精准控制滚动区域，实现专业级的响应式内容容器。
