本文讲解如何在全高 Flex 容器中，让内部 <article> 元素在内容超长时自动启用垂直滚动，同时严格限制其高度不超出父级 .col 的可用空间。核心方案是结合 calc() 动态计算剩余高度，并配合 flex: 1 与 overflow-y: scroll 实现响应式滚动容器。 本文讲解如何在全高 flex 容器中，让内部 `` 元素在内容超长时自动启用垂直滚动，同时严格限制其高度不超出父级 `.col` 的可用空间。核心方案是结合 `calc()` 动态计算剩余高度，并配合 `flex: 1` 与 `overflow-y: scroll` 实现响应式滚动容器。在现代 CSS 布局中，使用 display: flex 构建全高（full-height）页面结构非常常见，但当某一部分（如侧栏中的文章区域）内容动态增长时，常面临“高度溢出、破坏布局”的问题。理想行为是：.col 保持 100% 父容器高度，其内部 <article> 在内容较少时自然撑开，在内容较多时则自动启用滚动条，且不改变整体布局流。关键在于——不能简单设置 height: 100% 给 <article>，因为它的父级（.b）并非 Flex 容器，且包含 header 和 footer 等固定高度元素。此时需采用 “减法式高度控制”：用视口高度 100vh 减去所有已知静态占用空间（边框、内边距、头部/尾部），将结果精确赋给 <article>。以下为推荐实现方案：? 核心 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（<header> 高度，含行高/内边距）? 15px（<footer> 高度）? 20px（.b 左右 border？不参与，注意：实际应只减 垂直方向 固定尺寸）? 80px（上下 border: 10px × 2 层：.col 和 .b 各 10px 上下边框 → 共 40px？需按真实 DOM 结构校准）建议做法： 使用浏览器开发者工具测量 .b > header、.b > footer 及其上下间距总和，再加 .content 的 padding-top，最终得出准确偏移值（如 174px）。也可改用更健壮的 flex 方案（见下文替代方案）。? 替代方案：纯 Flex 驱动（推荐进阶使用）若允许微调 HTML 结构，可将 .b 设为 Flex 容器，完全交由 Flex 分配空间，彻底规避 calc() 手动计算： Felvin AI无代码市场，只需一个提示快速构建应用程序