最有效的解法是同时设置 input 的 box-sizing: border-box 和 min-width: 0，尤其在 flex 布局中；否则浏览器会因默认 content-box 盒模型和 min-width: auto 导致溢出。
直接加 box-sizing: border-box 是最有效的解法，但仅设在 input 上还不够——必须配合 min-width: 0（尤其在 Flex 布局中），否则浏览器仍会按内容宽度强行撑开。
为什么 width: 100% 的 input 还是溢出
根本不是写错了样式，而是浏览器默认用 box-sizing: content-box 计算尺寸：width: 100% 只管内容区，而 input 自带的 padding（如 Chrome 的 padding: 1px 6px）和 border（如 1px solid #ccc）会额外叠加在 100% 之外。实际宽度 = 父容器宽 + 左右 padding + 左右 border。
- 常见错误现象：
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 就悄悄外扩。
- 推荐入口 CSS 中统一声明：
*, *::before, *::after { box-sizing: border-box; } - 不要用
html, body { box-sizing: border-box }——box-sizing不继承，子元素依然走默认值 - 检查 computed styles：打开开发者工具，确认目标
input的box-sizing确实是border-box，而不是被 UI 库或框架样式覆盖了
替换元素（input、textarea、button）要单独处理
box-sizing: border-box 解决的是盒模型计算问题，但对替换元素的固有行为（如默认最小宽度、不可缩放性）无效。
-
input和textarea必须显式加min-width: 0，否则即使flex: 1也拉不满剩余空间 -
button同样适用；若它和input并排在 Flex 容器中，两者都要设min-width: 0 - 移动端键盘弹出时，viewport 缩放可能临时干扰计算，
min-width: 0能辅助稳定收缩行为
真正容易被忽略的是：min-width: 0 必须和 flex 属性、overflow: hidden 配合使用，缺一不可；而且得确认父容器本身有明确宽度约束（比如 width: 100% 或 max-width），否则 Flex 容器会按内容自适应，根本不存在“溢出”这回事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
