根本原因是浏览器默认box-sizing: content-box使width: 100%仅含内容区，padding/border额外叠加致溢出；须通过Computed面板验证box-sizing是否真为border-box，并在Flex中为input加min-width: 0及父容器overflow: hidden。
根本原因不是width: 100%写错了，而是浏览器默认用box-sizing: content-box算尺寸——此时width只管内容区，padding和border会额外加在外面，总宽必然超限。真正要查的，是开发者工具「Computed」面板里那个最终生效的box-sizing值。
为什么写了box-sizing: border-box还是没用
写了不等于生效。常见失效场景包括：
- 只写了
* { box-sizing: border-box; }，漏了*::before和*::after，伪元素仍按content-box渲染 - CSS-in-JS（如
styled-components）或 Shadow DOM 中，全局重置无法穿透，得在对应 scope 内单独声明 - UI 库（如 Bootstrap、Ant Design）自己重置了
box-sizing，但加载顺序在你的样式之后，直接覆盖了你的设置 -
input、textarea等表单元素自带浏览器默认padding，没显式重置的话，width: 100%几乎必溢出
input在 Flex 容器里撑破父容器怎么办
哪怕box-sizing: border-box已生效，input在display: flex容器中仍会默认拒绝收缩，因为它的min-width是auto。这不是盒模型问题，是布局行为限制。
- 必须给
input显式加min-width: 0 - 更彻底写法：
flex: 0 1 0（等价于flex-basis: 0），压制初始宽度 - 别漏掉
overflow: hidden——它得加在input的父容器上，否则裁剪逻辑不触发
误用100vw或margin导致的“真溢出”
box-sizing: border-box对margin完全无效，它永远算在总尺寸之外；100vw是按视口宽度算的，和父容器无关。这两类溢出，改box-sizing毫无作用。
-
margin: 10px导致溢出？直接清掉：body { margin: 0; }，或改用padding控制留白 -
width: 100vw+padding: 20px→ 总宽 = 视口宽 + 40px → 必然溢出。应改用width: 100%，并确保父容器有明确宽度 - 若真需基于视口且带内边距，用
calc(100vw - 40px)，但注意 viewport 变化时需同步调整，维护成本高
最常被跳过的动作：没进「Computed」面板验证box-sizing是否真为border-box，就以为“写了就生效”；还有就是忘了min-width: 0在 Flex 场景下对input的必要性——这两点一漏，再细的样式也白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
