input在Flex容器中width:100%失效，因浏览器默认box-sizing:content-box和min-width:auto双重锁定；须同时给父flex item和input自身设min-width:0，并配box-sizing:border-box才能正常缩放。
直接结论：不是 width: 100% 写错了，而是浏览器给 input 默认加了两道锁——box-sizing: content-box 和 min-width: auto，必须同时解开才能让它真正缩进父容器。
为什么 width: 100% 对 input 完全没反应
它不报错、不标红，但就是不缩。根本原因有两个叠加：
-
box-sizing: content-box（默认）让width: 100%只算内容区，padding 和 border 往外叠，实际宽度 = 父宽 + 左右 padding + 左右 border -
min-width: auto（UA 默认）强制input至少撑到“内容最小宽度”，空input也可能被 placeholder 或 type="number" 拉高到 80px+，此时width直接被忽略
必须同时改两个地方：父 flex item 和 input 自身
漏掉任意一层，width: 100% 都只是“假装生效”：
- 父容器（比如
.input-wrapper）必须设min-width: 0：否则它不会把剩余空间分给子元素，input的100%就是100% × 0px -
input自身也要设min-width: 0：解除 UA 对表单控件的最小宽度封锁，让它真正接受分配的宽度 - 再补上
box-sizing: border-box，确保 padding/border 不外扩
典型写法：
立即学习“前端免费学习笔记（深入）”；
.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 item 更保守，尤其当最外层容器没显式宽度时，input 可能直接塌成一条竖线：
- 确保最外层容器（如
.form）有width: 100%或max-width，不能只靠display: flex - 如果用
flex-direction: column套input，其父容器也得加width: 100% - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，必须显式写
最容易被忽略的是：这两处 min-width: 0 不是“可选优化”，而是行为开关——不加，width: 100% 在 Flex 下就等于没写。
