grid容器设overflow-x: auto仍溢出，因默认不触发BFC；须加min-width: 0激活BFC，子项配overflow: hidden等，并用minmax(0, 1fr)替代1fr，避免长文本撑开。
grid容器设了overflow-x: auto但内容还是溢出
这是因为grid默认不触发块格式化上下文（BFC），子项宽度可能撑破容器，overflow根本不起作用。必须让容器“真正理解”自己是滚动边界。
- 给
grid容器加display: grid的同时，必须配min-width: 0或width: 0（推荐前者）——这是激活BFC的关键，否则overflow被忽略 - 如果子项用了
flex或inline布局，它们会默认忽略容器约束；改用min-width: 0或overflow: hidden在子项上兜底 - 避免对
grid-template-columns写死1fr却不设minmax(0, 1fr)——1fr等价于minmax(auto, 1fr)，遇到长文本仍会撑开
grid中单列内容过长导致横向滚动失效
常见于表格类布局，比如一列放长路径、JSON字符串或URL，white-space: nowrap又没控制好。
- 在对应
grid-column的子元素上加overflow: hidden+text-overflow: ellipsis+white-space: nowrap - 更稳妥的做法：用
minmax(0, max-content)替代max-content定义该列，强制允许收缩 - 注意
grid-auto-columns不影响显式定义的grid-template-columns，别误以为设了它就能管住所有列
移动端overflow-x: scroll滑不动或卡顿
iOS Safari和部分安卓WebView对grid内overflow支持弱，尤其嵌套滚动时容易失灵。
- 必须加
-webkit-overflow-scrolling: touch（仅iOS有效，但无害） - 避免在
grid容器上同时设transform或will-change，这会破坏滚动层合成，导致卡顿甚至禁用滚动 - 如果滚动区域内容动态加载，记得在JS插入后调用
element.scrollWidth触发重排，否则初始scrollWidth === 0会让overflow判断失效
用fit-content()替代1fr却意外截断内容
fit-content(200px)看起来安全，但它本质是minmax(min-content, max(200px, min-content))，当内容比200px窄时，仍可能因min-content计算异常而压缩过度。
立即学习“前端免费学习笔记（深入）”；
- 优先用
minmax(0, <value>)</value>，比如minmax(0, 200px)——明确告诉浏览器“最小可缩到0” -
fit-content()在Firefox中对subgrid支持差，若父级是subgrid，直接换掉 - 调试时检查
getComputedStyle(gridItem).width，如果返回auto但实际渲染远大于预期，大概率是min-content被长单词/URL拉高了基准值
最麻烦的其实是文本节点里混着没有空格的超长base64或哈希值——这时候overflow-wrap: break-word和word-break: break-all得一起上，光靠grid设置压不住。
