本文介绍如何在全高 Flex 布局中，为内容区域（如 ）设置动态最大高度并启用垂直滚动，确保其不溢出父容器，同时保持整体布局的响应性与稳定性。
本文介绍如何在全高 flex 布局中，为内容区域（如 `
在现代 CSS 布局中，使用 display: flex 构建全高（full-height）页面结构十分常见。但当某个子区域（例如 .col > article）内容高度不可控时，容易导致整体溢出或破坏 flex: 1 的伸缩行为。此时，单纯设置 overflow-y: auto 并不能生效——因为 article 缺乏明确的高度约束，浏览器无法判断何时触发滚动。
核心解决方案是：结合 calc() 与视口单位（vh），为 article 显式定义可滚动区域的高度上限。
以下是一个典型场景的完整实现：
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrap {
height: 100%;
display: flex;
flex-direction: column;
border: 10px solid blue;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
border: 10px solid green;
}
.content {
padding-top: 64px;
display: flex;
flex-direction: column;
flex: 1;
}
.columns {
display: flex;
flex: 1;
border: 10px solid red;
}
.col {
width: 33.3333%;
display: flex;
flex-direction: column;
height: 100%;
border: 10px solid black;
}
article {
flex: 1 1 auto;
overflow-y: auto; /* 推荐用 auto 而非 scroll，避免空滚动条 */
/* 关键：减去 header、footer、padding、border 等固定占用空间 */
height: calc(100vh - 174px); /* 100vh = 视口高度；174px = header(15) + footer(15) + padding-top(64) + 上下 border(20×2=40) */
}✅ 为什么是 calc(100vh - 174px)？
因为 article 所在的 .b 容器（含 header/article/footer）位于 .col 内，而 .col 高度由 Flex 分配决定。直接依赖 100% 高度在嵌套 Flex 中易失效；而 100vh 提供稳定基准，再减去所有已知静态占用（边框、内边距、固定高度区块），即可精准预留滚动区域。
? 注意事项：
- 若布局存在响应式变化（如移动端隐藏 header/footer），需配合媒体查询动态调整 calc() 值；
- box-sizing: border-box 必须全局启用，否则边框和内边距会额外增加尺寸，导致计算偏差；
- overflow-y: auto 比 scroll 更友好——仅在内容超限时显示滚动条；
- 在 Safari 等旧版浏览器中，flex: 1 1 auto + height: calc(...) 组合更可靠，避免 flex: 1 单独作用于无高度上下文的元素时的行为不一致。
进阶建议：
若项目已使用 CSS 自定义属性，可将偏移量提取为变量，提升可维护性：
.col {
--static-offset: 174px;
}
article {
height: calc(100vh - var(--static-offset));
}通过该方案，你无需 JavaScript 即可实现「列容器全高 + 内容区智能滚动」的健壮效果，兼顾性能、语义与跨浏览器兼容性。
