fr单位按剩余宽度等比划分，不触发水平滚动；需容器有明确宽度约束、网格项设overflow-x: auto与min-width: 0，且内容真实撑宽才能出现滚动。
fr单位本身不产生滚动，它只分配可用空间
写grid-template-columns: 1fr 1fr 1fr不会让内容溢出，也不会触发水平滚动条——因为fr是按“剩余宽度”等比划分，不是按“固定像素”强制截断。浏览器会把所有列宽压缩或拉伸，确保总宽严格等于容器宽度（扣除gap后），内容再长也撑不开容器。
常见错误是以为1fr像min-width: 0一样能“放任内容突破”，其实它恰恰相反：它是收缩优先的弹性单位，会主动挤压子项来保总宽。
- 想让水平滚动出现，必须让**内容自然撑宽**，比如用
white-space: nowrap+ 长文本、未换行URL、table-layout: fixed失效的表格 -
fr列轨道只是“分配空间”，不是“设置边界”。子项仍可突破轨道（除非加min-width: 0+overflow） - 如果用了
grid-auto-columns: 200px这类自动列，且内容远超列数，才可能触发滚动——但前提是容器本身有明确width限制
容器没设width或max-width，滚动根本不会被计算
和垂直滚动一样，水平滚动的前提是：容器有明确宽度约束，且内容真实宽度 > 容器宽度。如果.grid只写了display: grid和grid-template-columns: repeat(5, 1fr)，但没设width、max-width或inline-size，它的宽度就是auto，浏览器会无限撑开，永远不“溢出”。
- 移动端尤其明显：
width: 100%在body没重置margin时，实际宽度 = 视口宽 + 8px（默认body外边距）→ 滚动条永远存在 - 正确做法：给容器加
width: 100vw或max-width: 100vw，并确保html, body { margin: 0; } - 避免
width: 100%嵌套在未设宽的父元素里——它会退化为auto，失去约束力
网格项没加overflow-x，或者漏了min-width: 0
即使容器宽度固定、内容也撑宽了，滚动条仍不出现？大概率是因为滚动行为没落在目标元素上。Grid中水平滚动必须由**网格项自身**触发，不是容器。
- 给目标网格项（比如第3列那个
.data-table）加overflow-x: auto，而不是给.grid容器 - 必须同步加
min-width: 0——这是最常漏掉的一环。默认min-width: auto会让网格项拒绝收缩，哪怕内容撑宽，它也优先撑开自己，不触发溢出 - 若内容含长单词或URL，补
word-break: break-word或overflow-wrap: break-word，否则overflow-x可能无效 - 别用
overflow: hidden测试——它直接裁剪，看不出是否真溢出
滚动条占位导致视觉抖动，误判为“没生效”
在Windows或旧版macOS上，overflow-x: auto出现后，滚动条会实时占位（约16px），导致网格列宽重排，右侧内容跳动。这容易让人以为“滚动没起来”，其实是布局在抖。
- 用
scrollbar-gutter: stable both提前预留滚动条位置，现代Chrome/Edge/Firefox已支持 - 兼容方案：给网格项加
padding-bottom: 16px，再用::-webkit-scrollbar { display: none; }隐藏滚动条（仍可拖拽） - 避免在
@media里动态切overflow值——断点切换时会闪一下，干扰判断
fr，而在容器宽度是否真实受限、网格项是否同时满足overflow-x + min-width: 0 + 内容撑宽三条件。少一个，滚动就静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
