横向滚动条需从根源解决：重置 box-sizing 为 border-box、清除 body 默认 margin、为替换元素设 max-width: 100%、修复 flex/grid 的 min-width 问题，并避开 safari 的 viewport 和 touch-action 冲突。
直接在 body 或 html 上加 overflow-x: hidden 几乎没用——它不解决溢出源，只掩盖问题，还可能破坏可访问性和 Safari 的弹性滚动。
必须先堵住“隐性溢出”的根：box-sizing 和默认 margin
80% 的横向滚动条来自 box-sizing: content-box 默认行为叠加 padding 或 border。比如父容器 padding: 16px，子元素 width: 100%，实际宽度就是 100% + 32px。
- 全局重置：
* { box-sizing: border-box; }必须放在 CSS 最顶部，否则第三方组件样式可能覆盖它 -
body { margin: 0; }—— 浏览器默认margin: 8px，在 iPhone SE（375px 宽）上就足以触发横向滚动 - 别只信
width: 100%，检查 computed 样式里offsetWidth > clientWidth的元素，尤其注意伪元素::before/::after是否带大尺寸content
图片、表格、iframe 这些“撑宽惯犯”要单独约束
它们是响应式布局中最常突破视口的替换元素，width: 100% 会拉伸变形，max-width: 100% 才是安全缩放方式。
- 统一加规则：
img, video, iframe, embed, object { max-width: 100%; height: auto; } - 表格必须配
table-layout: fixed+width: 100%，否则单元格内容（如长 Token）会撑开整表 - Bootstrap 的
.row有margin-left: -15px，若没被.container的padding包裹，负边距直接拖出视口——嵌套时在外层.col加overflow-hidden或max-width: 100%
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 - 错误写法：
.list { display: flex; overflow-x: hidden; }→ 缺少min-width: 0，滚动条照常出现 - 调试时临时加
outline: 1px solid red到body，一眼就能看出哪块内容真超出了视口边界
iOS Safari 的特殊坑：viewport 和 touch-action 冲突
它对 overflow-x: hidden 更敏感，且容易和手势控制打架，导致“看不见但能拖动”的伪滚动。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是底线，去掉maximum-scale=1.0和user-scalable=no（除非无障碍评估后确认可移除） - 避免在
body上设touch-action: pan-y，它和overflow-x: hidden冲突，反而激活横向拖拽 - 真正需要禁横向交互时（如全屏弹窗），用 JS 监听
touchmove并preventDefault()更可靠，但仅限明确不需要任何横向操作的场景
横向滚动条从来不是单一属性能“一键关闭”的问题；它往往是 box-sizing 漏掉、一张没加 max-width 的图、一个没包裹的 .row、加上 Safari 的 viewport 解析偏差，四者叠在一起的结果。调试时别急着改 overflow，先看 computed width 和 offsetWidth 差值，再逐层加 outline 定位——最常被忽略的是伪元素和负 margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
