本文讲解如何在全高 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? 15pxheader 高度含行高/内边距? 15pxfooter 高度? 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无代码市场只需一个提示快速构建应用程序