直接加 box-sizing: border-box 能解决 width: 100% 的 input 溢出问题，根本原因是浏览器默认 content-box 计算方式使 padding 和 border 额外增加宽度；还需配合 min-width: 0 才能在 Flex 布局中防止撑破容器。
直接加 box-sizing: border-box 就能解决，根本原因不是你写错了 width，而是浏览器默认用 content-box 算尺寸——width: 100% 只管内容区，padding 和 border 会额外加在它外面。
为什么 width: 100% 的 input 还是溢出父容器
默认情况下，input 自带 padding: 4px 8px 和 border: 1px solid #ccc。当父容器宽 300px，你写 width: 100%，实际渲染宽度是：300px（内容区） + 16px（左右 padding） + 2px（左右 border） = 318px。它必然撑破父容器。
这不是 bug，是 CSS 规范定义的 content-box 行为。
- 只设
padding: 0; border: none能压住溢出，但破坏焦点状态、可访问性，也不符合 UI 设计规范 - 给父容器加
box-sizing: border-box没用——box-sizing 不继承，子元素仍按默认content-box计算 - 现代项目中，
box-sizing: border-box在 Chrome/Firefox/Safari/Edge（IE8+）都原生支持，无需前缀
Flex 布局里 input 和按钮并排时被挤到下一行
即使加了 box-sizing: border-box，在 display: flex 容器中，input 默认有 min-width: auto，浏览器会优先保内容完整（比如长 URL 或连续无空格字符串），宁可撑破容器也不压缩。
立即学习“前端免费学习笔记（深入）”；
- 必须显式加
min-width: 0解除收缩限制 - 常见组合写法：
input { box-sizing: border-box; min-width: 0; } - 如果按钮也用了
flex: 1或width: 100%，记得一起加min-width: 0，否则它也可能撑开
全局重置比逐个写更可靠
手动给每个 input、textarea、button 加 box-sizing: border-box 容易漏，尤其遇到框架组件内部的表单控件（比如 el-input）或伪元素（::before/::after）。
- 推荐在 CSS 入口处统一写：
* { box-sizing: border-box; }或更稳妥的*, *::before, *::after { box-sizing: border-box; } - 不要写
html, body { box-sizing: border-box; }——box-sizing 不继承，对子元素无效 - 如果项目用了 Bootstrap 或 Element Plus，检查它们是否已重置
::before/::after；没包含的话，组件内伪元素仍可能悄悄撑开布局
真正容易被忽略的是 min-width: 0 ——它不解决盒模型计算问题，但决定了 Flex/Grid 容器里表单控件“愿不愿意缩”。哪怕 box-sizing 写对了，漏掉这一条，input 在小屏或紧凑布局中照样溢出。
