根本原因是内容未真正溢出——grid容器默认自适应高度，需加max-height: 400px或height: 80vh等明确尺寸约束才能触发overflow；子项须设min-width: 0/min-height: 0以允许收缩，滚动必须作用于直接包裹超长内容的内层容器而非外层布局容器。
Grid容器设了overflow但滚动条不出现
根本原因是内容没真正“溢出”——Grid容器默认自适应高度，overflow只是个开关，没尺寸约束就永远不触发。
必须给容器加明确的块级尺寸限制：
-
max-height: 400px（推荐，比height更容错） -
height: 80vh（避免百分比在嵌套中失效） - 确保父级不是
height: auto或塌陷状态
特别注意：grid-template-rows: 1fr 1fr会让容器填满可用空间，掩盖内容真实高度；改用max-content或显式像素值才能暴露溢出。
Grid子项内容撑宽导致水平滚动条意外出现
最常见诱因是minmax(min-content, 1fr)或未约束的auto列——浏览器优先满足长单词、<pre class="brush:php;toolbar:false;"></pre>块或替换元素（如<img>）的原始尺寸，直接撑爆容器。
关键修复点：
- 给可能溢出的子项加
min-width: 0（激活收缩逻辑） - 配
overflow-wrap: break-word处理长文本 -
<img>等替换元素必须显式写max-width: 100%，否则无视父容器约束 - 避免
width: 100vw——它按视口算，不随Grid容器缩放
嵌套Grid里滚动行为失效
滚动必须作用在**直接包裹超长内容的容器**上，不是外层布局容器。外层display: grid只管结构，内层才是滚动主体。
典型错误：
- 外层Grid容器设
overflow-y: auto，但内容在内层Grid里 - 内层Grid没设
max-height，又没设min-height: 0，子项卡住不收缩 -
align-content: start让内容顶部对齐，底部留空，误判为“没溢出”
正确做法：内层容器单独设max-height: 300px; overflow-y: auto，且该容器本身是Grid子项（不是孙子项）。
滚动条显示异常或不可见
不是代码没生效，而是浏览器默认隐藏或样式被覆盖。macOS/Chrome常把滚动条缩成一条细线，Firefox需单独声明。
强制可见并统一控制：
- WebKit（Chrome/Safari）：
::-webkit-scrollbar { width: 8px; } - Firefox：
scrollbar-width: thin; scrollbar-color: #666 #eee; - IE/Edge：
-ms-overflow-style: none; - 若要彻底隐藏但保留滚轮功能，用
no-scrollbar工具类，而非单纯overflow: hidden
真正难缠的是gap参与宽度计算带来的隐性溢出——两列1fr + gap: 20px实际宽度 = 容器内容宽 + 20px，没max-width: 100%就容易破框。这个偏差在DevTools Layout面板里看红色虚线轨道最直观。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
