input在flex容器中width不生效，因浏览器默认设min-width:auto锁死收缩；须同时给input及其父flex item设min-width:0并配width:100%才能正常缩放。
直接结论：input 在 Flex 容器中 width 不生效，不是你写错了，而是浏览器默认加了 min-width: auto 锁死收缩能力；必须同时给 input 自身和它的父容器（flex item）设 min-width: 0，再配 width: 100% 才能真正响应缩放。
为什么 width: 100% 对 input 完全没反应
Flex 布局下，width 属性本身对 input 是“软性失效”的——它不报错、不标红，但就是不按你写的数值渲染。根本原因是：input 元素在 Chrome/Firefox/Safari 中都内置了 min-width: auto，这个值代表“至少要撑开到内容最小宽度”，而空 input 的内容最小宽度可能只有几像素，也可能被 placeholder 或 type="number" 的默认样式拉高到 80px+。此时即使你写了 width: 100%，浏览器也优先尊重 min-width: auto，直接忽略 width。
-
min-width: auto优先级高于width和flex-basis，甚至高于flex-shrink: 1 - 它不是 CSS 规范强制要求的，而是各 UA（用户代理）的实现共识，所以无法靠 reset.css 一键清除
- 只改
input自身不够：如果它的父 flex item 没设min-width: 0，整个子项仍会被锁死，input根本拿不到可分配空间
min-width: 0 必须加在两个地方
漏掉任意一层，width: 100% 都会继续“假装生效”。关键不是加不加，而是加在哪、谁来加：
- 父 flex item（比如
.input-wrapper）必须设min-width: 0：否则它不会把剩余空间分给子元素，input再怎么设width: 100%也只是 100% × 0px -
input自身也要设min-width: 0：解除 UA 对表单控件的最小宽度封锁，让它真正接受父级分配的宽度 - 二者缺一不可，且不能用
!important替代——min-width: 0是行为开关，不是覆盖样式
典型结构示例：
.form-row { display: flex; gap: 8px; }
.input-wrapper { flex: 1; min-width: 0; } /* ← 父容器必须有 */
.input-wrapper input { width: 100%; min-width: 0; box-sizing: border-box; }
移动端 Safari 特别容易翻车的点
iOS Safari 对 flex 子项的尺寸推断更保守，尤其当父容器没显式宽度时，input 可能直接塌缩成一条竖线。这不是 bug，是它对“无约束 flex item”的安全策略：
- 确保最外层容器（如
.form）有width: 100%或max-width，不能只靠display: flex就指望它自动占满 - 若使用
flex-direction: column套input，其父容器也得加width: 100%，否则 iOS 下常取内容宽而非视口宽 - 极少数情况下需触发重排：给
input加transform: translateZ(0)，但这只是兜底手段，95% 场景靠双min-width: 0就够
min-width 设多少才不算瞎填
min-width: 0 虽然解封最彻底，但线上环境慎用——输入中文稍多就换行、光标不可见、点击区域过小。实际项目中更推荐可控值：
-
min-width: 120px：兼容大多数中文字体，能显示 6–7 个汉字，保留基本可读性 -
min-width: clamp(100px, 30vw, 200px)：小屏保底、中屏随动、大屏封顶，比纯%更稳 - 避免
min-width: 100%：和父容器宽度循环依赖，多数情况不触发，等于白写 - 别用
flex-grow: 1单独写：不配flex-shrink和flex-basis，行为依赖 UA 推断，Chrome 和 Safari 结果可能不同
复杂点在于：这个限制不是孤立的。一旦 input 里塞了 icon、clear button 或用了 appearance: none，就得重新检查每一层的 min-width 和 box-sizing——它们都可能悄悄打断缩放链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
