加了 border 后 input 宽度超限是因为 box-sizing: content-box 下 width 不含 border 和 padding；应统一设为 border-box，并在 flex 布局中补充 min-width: 0。
为什么加了 border 后 input 宽度就超了？
因为默认 box-sizing: content-box，width 只算内容区，border 和 padding 会额外加在宽度外面。比如设了 width: 300px、border: 1px solid、padding: 8px，实际总宽变成 300 + 2×1 + 2×8 = 318px——超出父容器是常态。
最稳的解法：用 box-sizing: border-box
这是首选方案，不是“可选”，而是必须加。它让 width 包含 border 和 padding，真正实现「所见即所得」：
input { width: 300px; padding: 8px; border: 1px solid #ccc; box-sizing: border-box; }- 所有现代浏览器都支持，包括 IE8+
- 无需计算、不依赖
calc()，也不怕后续改边框粗细 - 如果项目全局统一，建议在重置样式里加：
* { box-sizing: border-box; }
flex 布局下还失效？检查 min-width
即使写了 box-sizing: border-box，在 display: flex 容器中，input 仍可能被拉伸或压缩——根源是它的默认 min-width: auto 会阻止收缩。
- 必须显式覆盖：
input { min-width: 0; } - 尤其当父容器是
flex、且兄弟元素（如按钮）没设flex-shrink: 0时，这个min-width: 0就是固定宽度的最后防线 - iOS Safari 对
min-width: 0支持不稳定，可补一句min-width: 1px保底
实在不能改 box-sizing？用 calc() 手动扣减
某些遗留系统或第三方组件禁止修改 box-sizing，这时只能靠计算补救：
- 公式是：
width: calc(100% - 左右 border 宽度 - 左右 padding 值); - 例如：
input { width: calc(100% - 2px - 16px); padding: 8px; border: 1px solid #ccc; } - 注意：
calc()内部运算符两侧必须有空格，100%-2px是无效语法 - 该方式易出错，响应式场景下不如
box-sizing: border-box可靠，仅作兜底
固定宽度这事，表面看是写个 width，实际卡点全在盒模型和布局上下文里。很多人反复调 width 数值却没效果，问题往往出在没关掉 min-width: auto 或忘了 box-sizing 这层开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
