input在flex容器中不收缩的根本原因是浏览器ua样式强制施加min-width: auto且其作为替换元素width属性“软失效”，必须同时在父级flex item和input自身设置min-width: 0，并配合width: 100%与box-sizing: border-box才能正常工作。
input 在 flex 容器里不收缩，不是 flex 属性写错了，而是浏览器给它加了两道默认锁：一是 UA 自带的 min-width: auto（Chrome 下约 120px），二是它作为替换元素，width 属性在 flex 布局下天然“软失效”。单设 flex: 1 或 width: 100% 都打不开这两道锁。
为什么 input 的 width: 100% 看似生效却缩不动
width: 100% 在 input 上不按预期工作，是因为它的计算基准被 min-width: auto 覆盖了——这个值由浏览器强制施加，优先级高于 width 和 flex-basis，哪怕你写了 width: 0，它也只肯缩到内容最小宽度（比如 placeholder 文字撑开的宽度）。
- Chrome/Firefox/Safari 对
<input>的 UA 样式都隐含min-width: auto，无法靠 reset.css 清除 - 如果父 flex item 没设
min-width: 0，input 根本拿不到可分配空间，width: 100%就是 100% × 0px - 直接对 input 写
width: 100%+flex: 1是无效叠加，flex简写会覆盖掉你单独声明的尺寸逻辑
必须同时加 min-width: 0 的两个位置
漏掉任意一层，input 就卡死不动。这不是“建议”，是 flex 布局中 input 正常工作的最小必要条件：
- 父级 flex item（如
.input-wrapper）必须设min-width: 0：否则它不会把剩余空间分给子元素 - input 元素自身也必须设
min-width: 0：解除 UA 默认最小宽度封锁 - 二者要搭配
box-sizing: border-box和width: 100%才完整生效
常见错误组合与正确写法对比
这些写法看着像能用，实际都会翻车：
- ❌
.input { flex: 1; }—— 被flex: 1 1 0%覆盖，且没破min-width: auto - ❌
.input { width: 100%; }—— 没配min-width: 0，等于白写 - ✅ 正确组合：
.input-wrapper { flex: 1; min-width: 0; }+.input-wrapper input { width: 100%; min-width: 0; box-sizing: border-box; }
iOS Safari 特别容易忽略的点
移动端键盘弹出后，iOS Safari 会重算视口高度，若父容器没显式宽度约束，input 可能塌缩成一条线或直接溢出：
- 最外层容器（如
.form）必须有width: 100%或max-width: 100%，不能只靠display: flex - 避免在 focus 状态改
padding或border，用box-shadow模拟，且始终用box-sizing: border-box - 如果父容器是
flex-direction: column，其父级也要加width: 100%，否则 iOS 下可能取内容宽而非视口宽
真正难的从来不是记住哪一行 CSS，而是意识到：input 不是普通 div，它自带 UA 行为枷锁；而 min-width: 0 不是修饰性样式，是解锁整个 flex 收缩链路的第一把钥匙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
