罪魁祸首是 body 默认 margin 和 100vw 包含滚动条宽度：浏览器设 body margin: 8px 导致宽度超 100vw；100vw 在有垂直滚动条时计入其宽度，引发水平滚动条；应重置 html、body 并优先用 100% 或 fr 单位。
body 默认 margin 是罪魁祸首
浏览器给 body 设置了 margin: 8px，这是最常被忽略的源头。哪怕你写了 width: 100vw，实际渲染宽度是 100vw + 16px（左右各 8px），直接触发水平滚动条。这不是 bug，是规范行为。
验证方法很简单：在 DevTools 的 Styles 面板里临时加 body { margin: 0; }，滚动条立刻消失。
必须同步重置 html 和 body：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
100vw 包含垂直滚动条宽度
当页面内容过长、出现垂直滚动条时，100vw 在 Chrome/Firefox（Windows）中会把滚动条本身的宽度（通常 ~17px）算进“视口宽度”。结果就是：一个设了 width: 100vw 的 Grid 容器，实际比可用内容区还宽，硬生生挤出水平滚动条。
典型场景：
- 全屏 banner 或 header 使用
100vw，但 body 已有垂直滚动条 - Grid 容器内嵌了未约束的
或长单词，又用了100vw宽度
此时不要硬扛，优先换用 width: 100% —— 它基于父容器内容区计算，天然避开滚动条占位干扰。
Grid 子项 margin 撑开容器边界
在 display: grid 容器里，子元素的 margin 不会像普通流那样被“截断”，而是实打实向外撑。尤其当子项是 flex: 0 0 auto 或没设 min-width: 0 时，一个 margin-right: 20px 就能让整个 Grid 容器变宽。
排查建议：
- 用 DevTools 的 Layout 面板看 Grid 容器的 “Actual width”，对比 “Computed width”
- 临时给所有直接子项加
margin: 0 !important，观察滚动条是否消失 - 对可能溢出的子项（如文本块、图片）显式加
min-width: 0和overflow-wrap: break-word
gap 和 fr 单位能绕过多数陷阱
如果你本意是让 Grid 行高按比例分配且填满视口，别用 grid-template-rows: 30% 70% —— 百分比 + gap 极易因浏览器计算差异导致总高度略微溢出，引发纵向滚动条。
改用 fr 单位，它专为 Grid 设计，自动把 gap 纳入剩余空间分配：
.grid-container {
display: grid;
grid-template-rows: 3fr 7fr; /* 总和为 10，自动按比例分剩余高度 */
gap: 12px;
width: 100%;
height: 100vh; /* 注意这里是 100vh，不是 100vw */
}
关键点：fr 不依赖父容器的百分比 height 计算，也不受 margin/gap 溢出逻辑影响，兼容性也好（Chrome 57+/Firefox 52+/Safari 10.1+）。
真正难缠的，往往不是单位本身，而是你忘了重置 html 和 body 的默认 margin，或者在 Grid 里混用了 100vw 和子项的固定 margin —— 这两类问题加起来，占了生产环境水平滚动条的八成以上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
