Grid容器本身不支持单元格滚动，必须由子元素触发；需确保grid容器有明确高度约束，grid item行轨道使用minmax(0, 1fr)替代1fr，并在item内嵌套块级元素设height: 100%和overflow-y: auto。

Grid容器本身不支持单元格滚动，必须靠子元素触发

CSS Grid 的 grid-area 或单元格本身不是可滚动容器，overflow 在 grid item 上直接设为 auto 或 scroll 无效——除非该 item 是块级盒且高度受限。真正起作用的是单元格内的子元素（比如 <div>），它需要同时满足：有明确高度限制 + <code>overflow-y: auto。

常见错误是给 grid item（即直接子元素）加 height: 200px; overflow-y: auto 却没生效，原因通常是父级 grid track（如 grid-template-rows: 1fr）未约束其高度，导致 item 高度撑开，滚动条件不成立。

• 确保 grid 容器设置了 height 或 max-height，或其行轨道用固定值（如 200px）、minmax(0, 1fr) 等可收缩单位
• grid item 必须是块级元素（默认就是），且不能设 align-self: stretch 以外的值干扰高度计算
• 在 item 内部嵌套一层 <div class="scroller">，并在其上设置 <code>height: 100%; overflow-y: auto

  用 minmax(0, 1fr) 替代 1fr 才能允许行轨道收缩

  1fr 等价于 minmax(min-content, 1fr)，会优先满足内容最小高度，导致内部滚动失效；而 minmax(0, 1fr) 允许轨道压缩到 0，把空间控制权交还给子元素的 overflow 行为。

  例如，下面的写法会让第二行真正响应内容溢出：

  display: grid;
  grid-template-rows: 100px minmax(0, 1fr) 80px;

  若写成 100px 1fr 80px，中间行会尽可能拉伸，即使内容超长也不会触发滚动条。

  

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

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

  下载
  • 仅当 grid 容器自身有明确高度（如 height: 500px）时，minmax(0, 1fr) 才有意义
  • 如果容器高度由内容决定（height: auto），那任何 fr 都无法产生滚动，必须改用固定/最大高度
  • 配合 overflow: hidden 在 grid 容器上可防止意外溢出，但非必需

  滚动条样式和兼容性要注意 scrollbar-width 和 scrollbar-gutter

  Firefox 用 scrollbar-width 控制宽度，Chrome/Edge 从 v120+ 支持 scrollbar-gutter: stable both-edges 防止滚动条出现时内容跳动。但这两者都只对实际滚动容器生效——也就是你嵌套的那层 .scroller，不是 grid item 本身。

  示例：

  .scroller {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable both-edges;
  }

  • scrollbar-gutter 在 Safari 中仍不支持，需搭配 padding-right: 16px 回退
  • 自定义滚动条（::-webkit-scrollbar）只在 Chromium 内核生效，且必须作用于真实滚动容器
  • 不要在 grid item 上写 scrollbar-width，它不会继承也不会生效

  React/Vue 中动态内容容易忽略 height: 100% 的继承断裂

  框架中常通过组件嵌套生成 DOM，比如 <griditem><list><item>...</item></list></griditem>。这时 .scroller 往往是 <list></list>，但它父级（<griditem></griditem>）若没设 height: 100%，高度链就断了，100% 计算结果为 0。

  解决方案是显式透传高度：

  • 给 <griditem></griditem> 加 height: 100%（前提是它的父 grid 容器有高度）
  • 避免用 flex 包裹 .scroller，因为 flex 容器默认不传递百分比高度
  • 在调试时用 DevTools 检查 computed height：如果 .scroller 的 height 显示 0px，基本就是继承链断裂
  滚动条是否出现，最终只取决于「那个带 overflow-y 的元素」有没有被有效限制高度——其余所有 grid 布局配置，都是为这个目标服务的。很多人卡在“为什么加了 overflow 没反应”，其实问题从来不在 overflow，而在高度约束根本没传下去。