为什么CSS input设置width:100%仍会溢出

box-sizing: border-box 必须生效且配合 min-width: 0 才能使 width: 100% 对 input 真正有效；需在 Computed 面板验证是否被覆盖，注意伪元素、CSS-in-JS、Shadow DOM、UI 库重置冲突及 flex 布局下替换元素的默认行为。

根本不是 width: 100% 写错了，而是浏览器默认用 box-sizing: content-box 算尺寸——width: 100% 只管内容区，input 自带的 padding 和 border 会额外加在它外面。

box-sizing: border-box 必须生效，否则 width: 100% 就是假的

写了不等于起作用。唯一可信方式是打开开发者工具，切到「Computed」面板，查目标 input 的 box-sizing 值——如果被划掉，说明被更高优先级规则覆盖了。

1. 常见失效原因：只写了 * { box-sizing: border-box; }，漏了 *::before 和 *::after，伪元素仍按 content-box 算
2. CSS-in-JS 或 Shadow DOM 中，全局重置无法穿透，得在对应 scope 内单独声明
3. 某些 UI 库（如 Bootstrap、Element Plus）自己重置了 box-sizing，但没包含伪元素，或加载顺序晚于你的样式，直接覆盖
4. table 和 td 默认无视 box-sizing，必须显式声明才生效

Flex 布局中 input 必须加 min-width: 0

即使 box-sizing: border-box 生效了，input 在 display: flex 容器里仍可能撑破——因为它默认是替换元素，min-width: auto 会强制保内容完整（比如长 URL、连续无空格字符串），宁可溢出也不压缩。

1. 必须同时设置：input { box-sizing: border-box; min-width: 0; }
2. 更彻底写法：flex: 1 1 0;（等价于 flex-basis: 0）
3. 别只写 flex: 1，它隐含 flex-basis: 0%，但某些旧浏览器解析不稳定
4. overflow: hidden 要加在父容器上，否则裁剪逻辑不触发

溢出不一定来自 padding/border，也可能是 margin 或父容器自身

box-sizing: border-box 只影响 width/height、padding、border 的归属关系，对 margin 完全无效——它永远算在总尺寸之外。

1. 如果溢出是因为 margin: 10px，加了 border-box 没用
2. 父容器用了 100vw 又加 padding: 20px → 视口宽 + 左右 padding 必然超限，应改用 width: 100% 并确保父有明确宽度
3. body 默认有 margin: 8px，整个页面先多出 16px 总宽，得清掉
4. 绝对定位元素的 width: 100% 是按父元素的 padding box 计算的（含父 padding），不是 content box，容易误判尺寸

最常被跳过的动作：没进 Computed 面板验证，就以为“写了就生效”；还有就是忘了 min-width: 0 在 Flex 场景下对 input 的必要性。