怎样用CSS Flex实现固定头部和可滚动内容区？-css教程-PHP中文网

关键是要在直接参与 flex 布局且需滚动的容器（如 main）上设置 min-height: 0，否则默认 min-height: auto 会阻止收缩，导致 overflow-y: scroll 失效；嵌套 flex 时每层滚动容器都需单独设 min-height: 0。

怎样用css flex实现固定头部和可滚动内容区？

直接给结论：关键不是加 overflow-y: scroll，而是让内容区在 Flex 容器里「真正收缩」——必须显式设置 min-height: 0，否则即使内容溢出，它也不会滚动。

为什么 `flex-grow` 区域不滚动？

Flex 子项默认有 min-height: auto，它会阻止元素收缩到比内容更小的高度。哪怕你写了 overflow-y: scroll，浏览器也认为“这个区域高度足够撑开内容”，于是把滚动条压根忽略，转而让整个页面滚。

现象：内容很长，但 main 区域没滚动条，反而页面整体下拉
根本原因：flex-grow + 默认 min-height 组合导致“弹性不生效”
解决入口：覆盖掉那个隐式的 min-height: auto

`min-height: 0` 必须加在哪一层？

加在**直接参与 Flex 布局、且需要滚动的容器上**，通常是 main 或它的直系子容器（比如 .content）。不是加在最内层滚动内容上，也不是加在父级 html 或 body 上。

错误写法：.scrollable-inner { min-height: 0; }（如果它不是 flex item）
正确写法：main { min-height: 0; overflow-y: auto; }
如果 main 内部还有嵌套 flex（比如左右分栏），那左侧/右侧的 flex item 也要各自设 min-height: 0

完整结构示例与关键 CSS

以下是最简可靠结构（用原生 class，不依赖 Tailwind）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div class="layout">
  <header>固定头部</header><main><div class="scroll-area">
      <p>很多内容...</p>
      <div style="height: 2000px; background: #eee;"></div>
    </div>
  </main>
</div>

对应 CSS：

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  flex-shrink: 0; /* 防止被压缩 */
  height: 60px;
}
main {
  flex: 1;
  min-height: 0; /* 关键！没有这行就白搭 */
  overflow-y: auto;
}
.scroll-area {
  /* 这里不需要额外 min-height，除非它自己也是 flex item */
}

复杂点在于嵌套：只要某层是 flex item 且要承担滚动职责，就得单独确认它的 min-height 是否被重置。漏掉任意一层，滚动就失效。