实现 Flex 布局中子容器内元素的自动高度计算与垂直滚动-html教程-PHP中文网

本文讲解如何在全高 Flex 容器中，为内部元素设置自适应最大高度并启用滚动，避免内容溢出；核心是利用 calc() 动态减去固定结构高度，结合 flex 与 overflow-y: scroll 实现精准控制。

本文讲解如何在全高 flex 容器中，为内部 `

` 元素设置自适应最大高度并启用滚动，避免内容溢出；核心是利用 `calc()` 动态减去固定结构高度，结合 `flex` 与 `overflow-y: scroll` 实现精准控制。

在现代 CSS 布局中，当使用 display: flex 构建全高（height: 100% 或 100vh）页面结构时，常遇到这样的需求：父容器高度固定，子列（.col）需占满可用空间，而其中的

内容长度不可控——过长时应出现垂直滚动条，而非撑开布局或导致溢出。

直接对

设置 height: 100% 并不可靠，因为它在 Flex 子项中受父级 flex-direction: column 和 flex: 1 影响，可能无法正确继承剩余空间。更稳健的方案是显式计算其可用高度：用视口总高 100vh 减去所有非滚动区域的固定占用（如 header、footer、内边距、边框等），再通过 calc() 赋值。

以下是一个精简可靠的实现示例：

* {
  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 {
  flex: 1;
  border: 10px solid black;
}

/* 关键：为 article 显式设定可滚动高度 */
article {
  flex: 1 1 auto;
  overflow-y: auto; /* 推荐用 auto，仅在需要时显示滚动条 */
  height: calc(100vh - 174px); /* 100vh 减去 header(15px) + footer(15px) + padding-top(64px) + 上下边框(20px×2 = 40px) */
}

✅ 注意高度构成的准确性：
示例中 `174px = 15 (header) + 15 (footer) + 64 (padding-top) + 80 (上下各 10px 边框 × 2 × 2 层：.col 和 .b 容器)**。实际项目中请根据真实 DOM 结构逐层测量（推荐使用浏览器开发者工具的“Computed”面板验证），避免遗漏嵌套边框或内边距。

此外，为提升用户体验和兼容性，建议补充以下优化：