Flex容器中input缩不进窄栏的主因是替换元素默认min-width限制，需同时设置父容器和input自身的min-width: 0，并用flex: 1替代width实现可靠收缩。
Flex容器里输入框死活缩不进窄栏？min-width: 0不是万能解药
默认情况下，<input type="text">这类替换元素（replaced element）在 Flex 布局中会忽略 flex-shrink: 1，因为浏览器给它设了隐式的 min-width: min-content（Chrome/Edge）或类似约束。光加 min-width: 0 不一定管用——得看它是不是被父级 flex 项的 min-width 继承压制，或者是否卡在了表单控件自身的 UA 样式里。
input 在 Flex 中缩不下去的三个常见原因
不是所有“缩不进”都该怪 min-width。排查顺序建议如下：
-
input的父容器（即直接 flex item）没设min-width: 0—— Flex item 默认有min-width: auto，会阻止子元素压缩，必须显式覆盖 -
input自身被浏览器 UA 样式设置了min-width: 130px（常见于 Chrome），需用min-width: 0 !important或更精准的重置 - 用了
width: 100%但父容器没设width，导致百分比计算失效；此时应优先用flex: 1而非width
真正起效的最小配置组合
以下 CSS 是经过实测在 Chrome/Firefox/Safari 均能强制收缩的底线写法：
.flex-container {
display: flex;
}
.flex-item {
flex: 1;
min-width: 0; /* ← 关键：作用于 input 的父容器 */
}
.flex-item input {
width: 100%;
min-width: 0; /* ← 关键：作用于 input 自身 */
box-sizing: border-box;
}注意：flex: 1 等价于 flex: 1 1 0%，其中第二个 1 表示启用收缩，而 0% 作为基准值，配合 min-width: 0 才能突破 UA 的最小内容宽限制。
立即学习“前端免费学习笔记（深入）”；
别踩这个坑：用 flex-basis 替代 width 更可靠
当需要精确控制初始尺寸时，width 和 flex-basis 行为不同：
-
width: 200px+flex: 1→ 可能撑开容器，尤其在窄屏下易溢出 -
flex: 1 1 200px→ 初始占 200px，但允许压缩到min-width: 0下限，响应更可控 - 对
input直接设flex-basis无效（它不是 flex container），所以必须作用在其父容器上
复杂点在于：这个行为跨浏览器仍有细微差异，比如 Safari 对 min-width: 0 在表单元素上的生效时机更迟缓，有时需触发一次 layout（如加 transform: translateZ(0)）才能强制重排——但这是边缘 case，日常开发先确保父容器和 input 双重 min-width: 0 就已覆盖 95% 场景。
