fr单位本身不会直接导致水平滚动条，真正触发它的，是容器未设box-sizing: border-box且存在padding或border导致总宽度超限；子项未设min-width: 0也会使fr列溢出。
fr单位本身不会直接导致水平滚动条，真正触发它的，是容器没设 box-sizing: border-box，加上 padding 或 border 后宽度超限。
为什么box-sizing: content-box会让fr列“撑破”容器
Grid 容器默认用 content-box，意味着你写的 width: 100% 只管内容区。一旦加了 padding: 20px 或 border: 1px solid，总宽度就变成 100% + 40px + 2px——哪怕所有列都是 1fr，整行也会横向溢出，滚动条立刻出现。
这种问题在嵌套 Grid 或用了 gap 时更隐蔽：gap 占空间，但 padding/border 还额外往外撑，两者叠加后更容易突破父容器边界。
- 检查开发者工具「Computed」面板里的
border-box size，比看width更准 - 临时加
outline: 1px solid red能快速看出容器是否真占满预期区域 - 第三方 UI 库（如 Element Plus）可能重置了
box-sizing，得确认你的规则有没有被覆盖
全局设置box-sizing: border-box的正确写法
只写 html { box-sizing: border-box } 是无效的，因为 box-sizing 不继承。必须用通配符，且要覆盖伪元素：
*,
*::before,
*::after {
box-sizing: border-box;
}
这条规则要放在所有外部 CSS 引入之后，否则会被 Bootstrap 等库覆盖。如果项目需兼容 IE8，改用单冒号写法：*:before, *:after。
- 别漏掉
::before和::after——某些绝对定位 +inset的卡片布局，伪元素没设border-box也会撑破 - 表单控件（
input、textarea）常被忽略，它们默认content-box，且容易带浏览器默认padding - 用
!important仅限调试，上线前应靠加载顺序或更具体选择器解决覆盖问题
fr列仍溢出？可能是子项没设min-width: 0
fr 分的是容器内容区剩余空间，但它不强制子项收缩。如果某列里放了个 img 或 table，它们默认 min-width: auto，宁可撑开容器也不缩小——这时即使容器用了 border-box，照样出滚动条。
- 给子项加
min-width: 0（尤其含图片、iframe、内联块级元素时） - 搭配
overflow: hidden或text-overflow: ellipsis才真正生效 - 嵌套 Grid 子项也要设，溢出会逐层传导，不是设一层就完事
配合max-width和gap做最后兜底
就算 box-sizing 和 min-width: 0 都到位，如果父容器没约束最大宽度，或者 gap 值过大，仍可能在窄屏下触发溢出。
- 给 Grid 容器加
max-width: 100%，防止它撑破父级 - 用
grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))替代裸1fr 1fr，让 gap 参与后的空间分配更稳妥 - 调试时临时加
overflow: hidden看是否还有内容被裁切，能快速区分是布局溢出还是内容溢出
真正难缠的不是 fr 本身，而是它和盒模型、子项默认行为、gap 计算这三者叠在一起时的隐式交互。盯住 border-box size、min-width、gap 这三个点，比反复调 fr 数值有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
