根本原因是overflow-x:hidden未生效，因其仅对有明确宽度参照（如width/max-width或flex/grid约束）的容器起作用；若父容器无宽度限制、flex子项未设min-width:0、white-space:nowrap缺text-overflow:ellipsis，或html/body未双重设置，溢出内容便会透出。
为什么加了 overflow-x: hidden 还有横向滚动条
根本原因是 overflow-x: hidden 没生效——它只对“有明确宽度参照”的容器起作用。如果父容器没设 width、max-width 或受 flex/grid 限制，浏览器就不知道“隐藏谁的溢出”，结果还是把内容撑出去。
常见失效场景包括：
-
body上加了overflow-x: hidden，但html没同步设，导致溢出从根元素透出 - flex 容器里放了
img或input，它们默认min-width: auto，拒绝收缩，直接顶破容器 - 用了
white-space: nowrap却漏了text-overflow: ellipsis和overflow: hidden，三者缺一不可
用 outline 快速定位哪个元素在“偷偷加宽”
比手动删代码快得多：打开 DevTools 控制台，粘贴执行这行命令：
$$('*').forEach(el => el.style.outline = '1px solid red')
然后缩放到出问题的视口尺寸，红色轮廓里哪个框明显画到视口右边之外，就是它。特别注意这几类高危元素：
-
img、table、pre：没设max-width: 100%就极易撑宽 -
position: absolute或fixed元素：left: 0; right: -10px这种写法在 Safari 下会误算宽度 - Bootstrap 的
.row：自带margin-left: -15px，一旦脱离.container就直接溢出
检查 box-sizing 和 padding/border 是否悄悄加宽
默认 box-sizing: content-box 是罪魁祸首。比如一个 width: 100% 的 div 加了 padding: 16px，实际占宽就是 100% + 32px。
立刻验证的方法：
- 选中疑似溢出的元素 → 「Computed」面板 → 查看
box-sizing值和最终width计算结果 - 全局重置必须写全：
* { box-sizing: border-box; }，不能只靠*::before, *::after - 对
body单独设margin: 0，浏览器默认给body留了8px，窄屏下就触发溢出
查 transform 和 vw 单位引发的隐形溢出
这两类问题不报错、不显形，但真实存在：
-
transform: translateX(100px)后元素虽“移走”，渲染层仍可能保留其原始边界，尤其配合scale或filter: blur()时 -
100vw在有垂直滚动条时 ≈ 视口宽度 + 滚动条宽度（通常 12–17px），而100%是父容器宽度，两者差值就是横向滚动条的来源 - 媒体查询断点如
@media (max-width: 768px)在 DPR=2 设备上可能四舍五入漂移，建议写成767.98px避开临界点
真正难缠的是那些不触发重排、也不报错的溢出——它们藏在渲染层逻辑里，靠 outline 看不见，得开 DevTools 的「Rendering」→「Paint flashing」，看滚动出现时哪些区域被意外重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
