Grid item上设overflow-y: auto无效，因高度由行轨道决定；须用minmax(0, 1fr)替代1fr使轨道可收缩，并在item内嵌套.scroller元素设height: 100%和overflow-y: auto，同时确保grid容器有明确高度。
直接给 grid item 加 overflow-y: auto 不会生效——滚动条必须由内部子元素触发，且前提是行轨道能收缩、高度约束到位。
为什么 grid item 上设 overflow 没反应？
Grid item 默认是块级盒，但它的高度由父级行轨道（grid-template-rows）决定。如果轨道用的是 1fr，它等价于 minmax(min-content, 1fr)，会优先满足内容最小高度，导致 item 根本不“觉得”自己超出了可用空间，overflow 条件不成立。
-
1fr不等于“可压缩”，它会撑开以容纳内容，滚动无从谈起 - 真正起作用的是
minmax(0, 1fr)：允许轨道压缩到 0，把高度控制权交还给子元素 - 必须确保 grid 容器本身有明确高度（如
height: 500px或max-height: 80vh），否则minmax(0, 1fr)也无效 - 别在 item 上设
align-self: center或flex类样式，会干扰高度计算逻辑
正确结构：嵌套一层 .scroller 并设高
滚动行为只能由块级子元素承载，不能靠 grid item 自身。你需要在 item 内部加一层包裹容器，并严格控制其尺寸。
- grid item 保持默认块级表现，不设
height或overflow - 内部第一层子元素（如
<div class="scroller">）必须设 <code>height: 100%和overflow-y: auto - 若 item 是多行文本或长列表，额外加
word-break: break-word防止单词撑宽 - 为防滚动条出现时内容跳动，推荐在
.scroller上加scrollbar-gutter: stable both-edges（Chrome/Edge/Firefox 支持） -
::-webkit-scrollbar必须配width（垂直滚动）或height（水平），缺一个整个伪元素链失效 -
scrollbar-width: thin在 Firefox 有效，但仅限颜色和粗细，不支持圆角/阴影 - Safari 不支持
scrollbar-gutter，需回退：给.scroller加padding-right: 16px预留空间 - 移动端 iOS 上，记得加
-webkit-overflow-scrolling: touch防卡顿
常见兼容性与样式陷阱
::-webkit-scrollbar 只对实际滚动容器生效，而你定制的不是 grid item，是那个 .scroller 元素；Firefox 和 Safari 对高级样式支持极弱，别指望统一外观。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：滚动是否生效，不取决于你写了多少 overflow，而取决于「行轨道能否收缩 + 子元素是否真被限制在 100% 高度内」。哪怕只漏掉一个 minmax(0, 1fr) 或少了一层 height: 100%，整个滚动链就断了。
