滚动条不出现需先设置overflow；WebKit浏览器用::-webkit-scrollbar定制；Firefox/Edge无原生方案，需JS模拟；Grid子项滚动须设固定高或min-height:0。
滚动条不出现？先检查 overflow 和 display 类型
CSS Grid 容器默认不会自动触发滚动，哪怕子项溢出。关键不是“网格多长”，而是父容器是否具备可滚动的条件。
- 必须显式设置
overflow-y: auto或overflow-y: scroll（后者强制显示滚动条轨道） -
display: grid本身不改变溢出行为，它和display: block一样依赖父容器尺寸约束 - 常见错误：只给 grid 容器设了
height: 300px，但没加overflow，结果内容直接撑开容器、滚动条消失
如果用的是 grid-template-rows: 1fr 这类弹性行高，更要确保其父级有明确高度（比如 height: 100vh），否则 1fr 无参照，overflow 失效。
WebKit 浏览器（Chrome/Safari）怎么改滚动条样式？
只有 WebKit 内核支持 ::-webkit-scrollbar 系列伪元素，Firefox 和 Edge（新版）都不认——这点必须提前确认兼容需求。
- 只能作用于“有滚动行为”的元素，即已设置
overflow且实际发生溢出的容器 - 样式必须写在该容器的选择器下，不能提级到 body 或全局
- 最小可用组合是：
::-webkit-scrollbar（整体轨道）、::-webkit-scrollbar-thumb（滑块）
.grid-container {
overflow-y: auto;
height: 400px;
}
<p>.grid-container::-webkit-scrollbar {
width: 8px;
}</p><p>.grid-container::-webkit-scrollbar-thumb {
background-color: #6c5ce7;
border-radius: 4px;
}注意：::-webkit-scrollbar-track 默认透明，若想加背景色，得手动设 background，否则滑块会“看不见”。
立即学习“前端免费学习笔记（深入）”；
Firefox 和新版 Edge 怎么办？没有原生滚动条 API
Firefox 完全不支持 ::-webkit-scrollbar，Edge（Chromium 内核）虽支持但行为略有差异；目前没有跨浏览器标准 API 可以统一定制滚动条外观。
- 唯一可靠方案：用 JavaScript 模拟滚动条（如
simplebar、overlay-scrollbars），它们会隐藏原生条、插入自定义 DOM 节点 - 代价明显：增加 JS 体积、可能影响滚动性能、需监听容器尺寸变化重新初始化
- 如果只是微调颜色/圆角，建议放弃 Firefox 支持，或用渐进增强思路——WebKit 下美化，其他浏览器保持默认（系统原生更易用）
别试图用 scrollbar-color（Firefox）+ ::-webkit-scrollbar 双写来“兼顾”，因为 scrollbar-color 只控制 thumb 和 track 颜色，不支持宽度、圆角等，能力非常有限。
Grid 子项内嵌滚动？小心嵌套 overflow 的陷阱
常见需求：整个网格可垂直滚动，但某一个 grid-area（比如侧边栏或日志面板）也要独立滚动。这时容易混淆“谁该设 overflow”。
- 网格容器设
overflow-y: hidden（防外溢），再给目标子项单独设overflow-y: auto+ 固定高度（如height: 200px） - 错误做法：给子项设
height: 100%却不约束父 grid 行高，导致高度计算为 0，滚动失效 - 若用
grid-template-rows: 1fr 2fr，想让第二行可滚动，就得给对应子项加min-height: 0（防止 flex/grid 伸缩时忽略 overflow）
Grid 布局中，overflow 生效的前提是元素有“块格式化上下文边界”，而 min-height: 0 是最常被忽略的破局点。
滚动条定制在 Grid 里不是加个 class 就完事的事，它卡在布局计算、渲染管线、浏览器实现三者的交界上。真正麻烦的从来不是怎么写 CSS，而是搞清“此刻到底是谁在滚动、谁该负责截断、谁又悄悄吃了 overflow”。
