根本原因是默认box-sizing: content-box使width: 100%仅含内容区，padding和border额外叠加导致溢出；需设box-sizing: border-box（含::before、::after），并配合min-width: 0（flex/grid中）、验证Computed值、处理替换元素。
移动端 width: 100% 溢出屏幕，90% 是因为默认 box-sizing: content-box 把 padding 和 border 算在宽度外面 —— 加上 box-sizing: border-box 就能治本，但必须覆盖伪元素、验证生效、配合 min-width: 0（尤其在 flex 容器里）。
为什么移动端 input/textarea 一设 width: 100% 就撑破屏幕
移动端浏览器（包括 Safari iOS、Chrome Android、X5 内核）对表单控件有默认 padding（如 iOS Safari 给 input 加了约 12px 左右内边距），而它们又继承 box-sizing: content-box。结果就是：width: 100% 只占父容器内容区，再叠加上自身 padding，总宽轻松超视口。
- 父容器若本身有
padding（比如.form-group { padding: 0 16px; }），子元素width: 100%实际只对 100% − 32px 生效，再加自身 padding 更易错位 - 微信 X5 内核（v3.7 以下）对
*::before, *::after的box-sizing重置支持不稳，漏掉就可能让某些组件内图标或伪元素溢出 - 别信“我写了
box-sizing: border-box”，一定要进开发者工具「Computed」面板看真实值 —— Bootstrap 或其他框架的 reset 样式可能覆盖你写的规则
怎么写才真正生效：全局重置的最小安全写法
光写 * { box-sizing: border-box; } 不够，伪元素（::before/::after）可能漏掉；老项目不敢动全局？至少得保关键路径。
- 推荐写法（含伪元素兜底）：
*, *::before, *::after { box-sizing: border-box; } - 微信 X5 兜底（v3.7 以下）可追加：
html { box-sizing: border-box; } - 老项目保守策略：只针对高频出问题的元素显式设置，例如
input, textarea, select, .form-control, .card-content > * { box-sizing: border-box; }
flex 容器里 width: 100% 还溢出？min-width: 0 才是关键
即使加了 box-sizing: border-box，在 display: flex 的父容器中，子项（尤其是 img、input 这类替换元素）默认 min-width: auto，会阻止收缩 —— 此时 padding 仍可能导致横向滚动条。
立即学习“前端免费学习笔记（深入）”；
- 必须配对设置：
.flex-item { width: 100%; min-width: 0; /* 强制允许收缩 */ box-sizing: border-box; } - grid 同理：用
grid-template-columns: 1fr时，子项也需min-width: 0，否则box-sizing无效 - 绝对定位元素（
position: absolute）的width: 100%是按父元素的 padding box 计算的，不是 content box —— 这点容易误判尺寸，别靠猜，用「Computed」看实际参考基准
图片、iframe、表格这些“硬骨头”怎么办
box-sizing: border-box 对 img、iframe、table、td 默认无效 —— 它们是替换元素或有特殊盒模型逻辑，不能光靠 box-sizing 解决。
-
img和iframe：必须加max-width: 100%; height: auto;，否则width: 100%可能被忽略或撑开 -
table和td：需显式声明box-sizing: border-box，否则默认无视 - 长文本强制不换行（
white-space: nowrap）：哪怕box-sizing正确，也会因内容过长溢出，得配overflow-x: auto或text-overflow: ellipsis
真正麻烦的从来不是写一行 box-sizing: border-box，而是它在不同上下文里的“生效边界”：伪元素是否覆盖、flex 是否配 min-width: 0、替换元素是否单独处理、X5 内核是否兜底 —— 漏掉任何一环，都可能在某个机型或某个断点下突然冒出来一个横向滚动条。
