width: 100%溢出父容器的根本原因是默认box-sizing: content-box，此时width仅指内容区宽度，padding和border额外叠加导致总宽超限；需用box-sizing: border-box修正，并注意伪元素、flex/grid中min-width: 0及父容器padding的影响。
为什么width: 100%会超出父容器——不是写错了，是盒模型在“算账”
浏览器没出错，是你没看清它按什么规则加法。默认box-sizing: content-box下，width: 100%只管内容区，而padding和border是额外加在它外面的。比如父容器宽300px，子元素设了width: 100%、padding: 12px、border: 1px，实际总宽就是300px + 24px + 2px = 326px。
更隐蔽的是：父容器自己若有padding: 0 20px，它的 content 区只有260px，子元素width: 100%就只占这260px；再叠加上自己的padding，又超了。
怎么确认box-sizing真生效了——别信代码，看 computed 值
写了box-sizing: border-box不等于它就起作用。常见失效原因：
- 其他样式规则优先级更高，覆盖了你的设置
- CSS-in-JS 库（如
styled-components）SSR 注入顺序错乱，首屏闪动 - 框架（如 Bootstrap）自己重写了
box-sizing，但没包含::before/::after，导致伪元素仍按content-box算
进开发者工具，切到「Computed」面板，直接查目标元素的box-sizing值——这是唯一可信依据。
立即学习“前端免费学习笔记（深入）”；
input、textarea等表单元素为什么必溢出
它们自带浏览器默认padding和border，且多数未显式声明box-sizing。哪怕你只写width: 100%，实际已超。
- 必须显式加
box-sizing: border-box，不能依赖继承 - 全局重置最省事：
* { box-sizing: border-box; }，但要补全伪元素：*::before, *::after { box-sizing: border-box; } - 老项目不敢动全局？优先加在高频出问题的地方：
input、textarea、select、.form-control
flex 或 grid 容器里还用管box-sizing吗
要管。flex item 默认会收缩，但一旦你设了min-width: auto（这是img、input的默认值）或显式width: 100%，且父容器没设overflow: hidden，padding仍会导致横向滚动条或视觉错位。
- flex 子项必须配
min-width: 0，否则box-sizing也救不了它被撑开 - grid 子项同理，尤其用了
grid-template-columns: 1fr时，min-width: 0是刚需 - 父容器若设了
padding，子元素width: 100%仍只对 content 区生效——所以还是得靠box-sizing: border-box统一语义
真正难处理的从来不是box-sizing本身，而是它和min-width、margin、display类型（比如inline图片）、甚至父容器是否创建 BFC 的组合效应。一个width: 100%背后，其实是整套盒模型在协同计算。
