flex中input无法收缩的根本原因是浏览器对替换元素默认设置min-width: auto，必须同时设置flex: 1（或flex: 1 1 0）和min-width: 0才能解锁收缩能力，box-sizing对此无效。
Flex 中 input 默认 min-width: auto 锁死收缩能力
不是 flex-shrink 没生效，而是浏览器给 input 这类替换元素（replaced element）设了隐形枷锁：min-width: auto。它强制 input 至少容纳自身内容宽度（比如 Chrome 下约 13ch），哪怕父容器空间不足、flex-shrink: 1 写得再全，也卡在这道底线不动。
box-sizing: border-box 解决不了这个问题
box-sizing 只管 padding/border 算进 width 还是算在外面，和“能不能缩”完全无关。你加了 box-sizing: border-box 后 width: 100% 不再溢出，但若父容器变窄、input 仍拒绝变小——问题根源还是 min-width: auto。
- 验证方式：打开 DevTools → Computed 面板 → 查
input的min-width值，若显示auto就是它在作祟 - 第三方 UI 库（如 Element Plus）可能重置了全局
box-sizing，但不会动min-width，得你自己补 -
min-width: 0必须加在input元素本身，不是父容器，也不是 wrapper div
Flex 场景下必须配对使用 flex + min-width: 0
单独写 flex: 1 或 flex-grow: 1 无效；只写 min-width: 0 也不够——两者缺一不可：
-
flex: 1 1 0（或flex: 1 1 0px）明确告诉 Flex 引擎：“我基准为 0，有空间就涨，没空间就缩” -
min-width: 0解除浏览器默认锁，让“缩”这件事真正可执行 - 若还搭配
overflow: auto，必须同步加min-width: 0，否则滚动条根本不会出现 - 移动端键盘弹起时视口高度突变，
flex-basis: 0比0%更可靠，避免因 vh 失效导致计算错乱
容易被忽略的连锁反应
一个没加 min-width: 0 的 input，可能引发多层失效：
- 旁边按钮被挤出视口：因为
input死守最小宽度，兄弟元素被迫换行或溢出 -
text-overflow: ellipsis不生效：文字撑开容器，截断逻辑压根不触发 - JS 动态调整
minWidth失败：DOM 上已存在min-width: auto的计算优先级，内联样式覆盖不了 - 嵌套 Flex 容器中问题更隐蔽：外层加了
min-width: 0，但input在内层子项里，约束没透下去
min-width: 0 的 flex 是纸老虎，写了 min-width: 0 却没设弹性基准（flex-basis）的 input 依然不会响应空间变化。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
