width: 100% 的 input 溢出是因为浏览器默认 content-box 盒模型，padding 和 border 额外叠加；必须同时设置 box-sizing: border-box 和 min-width: 0（flex 中还需 flex: 1 1 0），并全局重置避免遗漏。
根本不是样式写错了，而是浏览器默认用 box-sizing: content-box 算尺寸——width: 100% 只管内容区，padding 和 border 会额外叠加出去。
为什么 width: 100% 的 input 还是溢出
Chrome 默认给 input 加了 padding: 1px 6px，边框通常是 1px solid #ccc。实际宽度 = 父容器宽 + 左右 padding + 左右 border。哪怕父容器只有 300px，input 也会撑到 314px 左右。
- 常见错误现象：
input在小屏下触发横向滚动条、与旁边按钮错行、卡片右侧被切掉 - 典型场景：表单字段嵌套在
display: flex容器里；或父容器有padding但没重置子元素盒模型 -
box-sizing: border-box从 IE8 起原生支持，无需前缀；IE7 及更早版本不支持，但现代项目基本可忽略
input 必须同时设 box-sizing: border-box 和 min-width: 0
在 Flex 布局中，input 默认 min-width: auto，浏览器会优先保内容完整（比如长 URL 或连续无空格字符串），宁可撑破容器也不压缩。只加 box-sizing: border-box 只解决了尺寸计算逻辑，没解除收缩限制。
- 必须组合生效：
input { box-sizing: border-box; min-width: 0; } - 如果父容器是
display: flex，且希望input占满剩余空间，建议写成：flex: 1 1 0;（等价于flex-basis: 0，更彻底压制初始宽度） - 别漏掉
overflow: hidden——它得加在input的父容器上（或input自身），否则裁剪逻辑不触发
全局重置比局部修补更可靠
只给 input 加样式容易漏：它的包裹层、伪元素（如 ::before）、或第三方组件内部的表单控件，可能仍是 content-box。一旦漏掉，padding/border 就悄悄外扩。
- Bootstrap 5 默认已全局设
* { box-sizing: border-box }，但如果你引入了重置 CSS（如旧版 normalize.css 或自定义 reset），可能被覆盖 - 检查开发者工具里
box-sizing是否被划掉——很可能是某条div { box-sizing: content-box }覆盖了 - 避免用
!important强行覆盖，容易在媒体查询里失效；改选择器权重更稳妥，比如用.container > .row { box-sizing: border-box }
最常被忽略的是 min-width: 0 ——尤其在 Flex 容器里，它和 box-sizing 必须成对出现，缺一不可。
