横向滚动条本质是视口宽度计算与盒模型叠加导致的溢出：100vw 包含滚动条宽度而 100% 不包含，content-box 下 padding/border 额外撑宽；需统一 box-sizing: border-box、替换元素设 max-width: 100%、flex/grid 容器加 min-width: 0 或 min-inline-size: 0，safari 中应避免仅依赖 body { overflow-x: hidden }。
横向滚动条不是“加个 overflow-x: hidden 就能消失”的问题，而是视口宽度计算和盒模型叠加出的溢出结果。根本矛盾在于：100vw 包含滚动条宽度，而 100% 不包含；同时默认 box-sizing: content-box 会让 padding 和 border 额外撑宽元素。
为什么 100vw 在有纵向滚动条时会触发横向滚动
当页面内容高度超出视口、浏览器自动显示纵向滚动条时，该滚动条会占用一部分视口宽度（通常 12–17px）。此时 100vw 是按完整窗口宽度计算的，比如 iPhone SE 的 100vw = 375px，但实际可用宽度只有约 358–363px。若某元素设了 width: 100vw，它就会比可用区域宽出那几像素，直接触发横向滚动。
-
100%基于父容器的content-box宽度，更安全，但前提是父容器没被撑宽 -
100vw永远等于window.innerWidth，不管有没有滚动条——这是 WebKit 和 Blink 的一致行为 - Vue/React 项目里用
vw做 rem 替代方案时，极易在长列表页复现此问题
box-sizing: border-box 必须放在 CSS 最顶部
80% 的隐性溢出来自 padding + width: 100% 组合。例如父容器 padding: 16px，子元素 width: 100%，实际宽度 = 100% + 32px。
- 写成
* { box-sizing: border-box; }，且必须是样式表第一条规则 - 第三方 UI 库（如 Element Plus、Ant Design）常重置
box-sizing，所以要确保你的重置优先级更高 - 不要只对
div或section单独设，伪元素::before/::after同样受此影响
图片、表格、iframe 这些替换元素必须配 max-width: 100%
width: 100% 对替换元素无效——它们有自己的固有尺寸，width 会强制拉伸变形；而 max-width: 100% 才真正约束其上限。
- 统一加这条规则：
img, video, iframe, embed, object { max-width: 100%; height: auto; } - 表格要额外加
table-layout: fixed和width: 100%，否则单个长文本（如 JWT Token）会撑爆整列 - Bootstrap 的
.row有margin-left: -15px，若没被.container包裹，负边距直接拖出视口
Flex/Grid 容器里 overflow-x: hidden 失效？缺 min-width: 0
Flex 和 Grid 容器默认 min-width: auto，意味着子项即使内容再长、哪怕有 white-space: nowrap，父容器也不会收缩——于是 overflow-x: hidden 形同虚设。
- Flex 容器加：
min-width: 0 - Grid 容器加：
min-inline-size: 0（min-width在逻辑属性下不生效） - 别只写
.list { display: flex; overflow-x: hidden; }，漏掉min-width: 0就白写了
最易被忽略的是 Safari：它对 body { overflow-x: hidden } 的处理极不稳定，尤其在键盘弹出或缩放后会失效。真正可靠的解法是用固定高度的 wrapper + min-width: 0 + touch-action: pan-y 组合，而不是堆砌 overflow-x: hidden。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
