input宽度失控需同时设置box-sizing: border-box、min-width: 0和flex: 1 1 0，三者缺一不可：前者控制尺寸计算，后两者分别解除收缩限制并切断内容宽度干扰。
因为 input 是替换元素，默认 min-width: auto，加上浏览器默认 box-sizing: content-box，两者叠加导致宽度失控——光改 width: 100% 没用，必须同时处理盒模型和收缩权限。
box-sizing: border-box 不是万能解药
你给 input 加了 box-sizing: border-box，但依然溢出？这不是属性没生效，而是它只管“尺寸怎么算”，不管“能不能缩”。input 作为替换元素，天生带 min-width: auto（等价于 min-width: min-content），浏览器宁可撑破容器，也不愿压缩它。
- 必须显式加
min-width: 0或写成flex: 1 1 0（即flex-basis: 0） -
min-width: 0和box-sizing: border-box是搭档关系，缺一不可 - 全局重置
* { box-sizing: border-box; }很方便，但得确认没被第三方组件（如.ant-input）覆盖
flex: 1 的陷阱：flex-basis 决定初始宽度
flex: 1 等价于 flex: 1 1 auto，其中 flex-basis: auto 会让浏览器先按内容宽度（比如 placeholder 文本、默认 padding）计算基础尺寸，再伸缩——这一步就可能超宽。
- 改成
flex: 1 1 0，强制从 0 开始均分空间，更可控 - 若父容器是
display: flex且横向布局，input必须设min-width: 0，否则flex-grow: 1不会触发 - 旁边有按钮时，记得给按钮加
flex-shrink: 0，否则它会被压扁
移动端和老 Safari 的隐藏雷区
在 iOS Safari ≤15.6 或某些安卓 WebView 中，flex: 1 隐含的 min-width: 0 可能不生效，导致长 URL 或 base64 字符串直接撑破。
- 必须显式写
min-width: 0，别依赖flex缩写 - 检查 DevTools 的「Computed」面板，确认
min-width真的是0px，不是auto或几百像素 - 如果
input外层还套了div，而你把min-width: 0错加在那层上，无效——它只对 Flex 容器的**直接子元素**起作用
真正稳的写法就三行：box-sizing: border-box 控制尺寸计算，min-width: 0 打开收缩开关，flex: 1 1 0 切断内容干扰。漏掉任意一个，都可能在某个机型或数据下突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
