根本原因是1fr默认无收缩下限，遇长内容会撑宽列导致横向滚动；需同时设容器宽度边界、轨道为minmax(0,1fr)、子项min-width:0，并用devtools定位溢出元素。
根本原因不是fr写错了，而是它默认不设收缩下限——内容一撑，列就跟着爆宽，滚动条自然出现。
为什么1fr会撑开容器导致横向滚动
fr是“剩余空间分配单位”，只管上限，不管下限。浏览器不会自动给1fr列加min-width: 0，遇到长文本、图片、固定宽元素（比如width: 200px的按钮）时，它宁可拉宽整行也不折行或压缩。
- 典型现象：
grid-template-columns: repeat(3, 1fr)在窄屏下，某列里一个pre块含长 JWT token，整行被顶宽，横向滚动条弹出 -
1fr等价于minmax(auto, 1fr)，而auto就是min-content，浏览器按内容最小尺寸定列宽底线 - 嵌套结构中，子项是 Flex 或另一个 Grid，但没设
min-width: 0，溢出会逐层传导上来
必须同时满足的三个条件才压得住
单加overflow-x: hidden到容器上基本无效——因为溢出源不在内容框里，而在子项的尺寸锁定机制中。
- 容器要有明确宽度边界：避免用
width: 100vw（Windows 下含滚动条宽度），改用width: 100%或100dvw - 轨道要允许收缩：
grid-template-columns必须写minmax(0, 1fr)，不能只写1fr 1fr或minmax(0, 1fr) auto - 子项要主动放弃最小宽度：
.grid > .item { min-width: 0; }必须落在 Grid 直系子元素上；嵌套内层也要加固，比如.item > .inner { min-width: 0; }
怎么快速定位哪个元素在撑宽
别靠猜。打开 DevTools 控制台，粘贴运行这行代码：
$$('*').forEach(el => { if (el.scrollWidth > el.clientWidth + 1) el.style.outline = '2px solid red' })
所有实际宽度超容器的元素会立刻标红。常见罪魁包括：img没设max-width: 100%、pre没配white-space: pre-wrap、框架组件（如.ant-card-body）没覆盖min-width: 0。
最易被忽略的是：HTML 根节点必须设overflow-x: hidden，不是body；且body { margin: 0; }漏掉就会白干——8px × 2 = 16px 溢出直接触发滚动条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
