必须同时给父flex item和input自身设min-width:0并配box-sizing:border-box，否则width:100%因浏览器默认min-width:auto和box-sizing:content-box双重锁定而失效。
Flex 子项里的 input 默认会撑开容器，不是因为你没写 width: 100%，而是浏览器给它上了两道锁：min-width: auto 和 box-sizing: content-box。只解一道，它照样不缩。
为什么 width: 100% 对 input 完全没反应
它不报错、不标红，但就是不按你写的缩。根本原因有两个叠加：
-
box-sizing: content-box（默认）让width: 100%只算内容区，padding和border往外叠，实际宽度 = 父宽 + 左右padding+ 左右border -
min-width: auto（UA 默认）强制input至少撑到“内容最小宽度”，空input也可能被placeholder或type="number"拉高到 80px+，此时width直接被忽略
必须同时改两个地方：父容器和 input 自身
漏掉任意一层，width: 100% 就等于没写：
- 父 flex item（比如
.input-wrapper）必须设min-width: 0：否则它不会把剩余空间分给子元素，input的100%就是100% × 0px -
input自身也要设min-width: 0：解除 UA 对表单控件的最小宽度封锁，让它真正接受分配的宽度 - 再补上
box-sizing: border-box，确保padding/border不外扩
移动端 Safari 特别容易翻车的点
iOS Safari 对无约束 flex item 更保守，尤其当最外层容器没显式宽度时，input 可能直接塌成一条竖线：
- 确保最外层容器（如
.form）有width: 100%或max-width，不能只靠display: flex - 如果用
flex-direction: column套input，其父容器也得加width: 100% - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，必须显式写
典型写法与易忽略细节
关键不是“有没有加”，而是“加在哪”和“有没有被覆盖”：
- 父容器写
flex: 1; min-width: 0;，别只写flex: 1—— 它等价于flex: 1 1 0%，而0%在某些 Safari 版本下不如0可靠 -
input上写width: 100%; min-width: 0; box-sizing: border-box;，三者缺一不可 - 调试时直接看 DevTools 的 Computed 面板，确认目标元素的
min-width是0px（不是auto，也不是0%）
最容易被忽略的是：min-width: 0 不是“可选优化”，而是行为开关——不加，width: 100% 在 Flex 下就等于没写；更麻烦的是，它必须同时出现在父子两级，且不能被 flex 简写意外覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
