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>），它需要同时满足：有明确高度限制 + 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">，并在其上设置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，中间行会尽可能拉伸，即使内容超长也不会触发滚动条。
- 仅当 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>，但它父级（<GridItem>）若没设 height: 100%，高度链就断了，100% 计算结果为 0。
解决方案是显式透传高度：
- 给
<GridItem>加height: 100%（前提是它的父 grid 容器有高度） - 避免用
flex包裹.scroller，因为flex容器默认不传递百分比高度 - 在调试时用 DevTools 检查 computed height：如果
.scroller的 height 显示0px，基本就是继承链断裂
overflow-y 的元素」有没有被有效限制高度——其余所有 grid 布局配置，都是为这个目标服务的。很多人卡在“为什么加了 overflow 没反应”，其实问题从来不在 overflow，而在高度约束根本没传下去。 
