flex-grow: 1 生效需五步闭环：父容器 display: flex、主轴为 row、父容器有明确宽度、父项和 input 均设 min-width: 0；缺一不可，否则不生效。
flex-grow: 1 不生效，不是代码写错了，而是三个硬性前提缺一不可：父容器必须是 display: flex、主轴方向必须是 row、父容器自身要有明确宽度（比如 width: 100%）。
为什么 flex-grow: 1 显示激活却没反应
开发者工具里看到 flex-grow: 1 是绿色高亮，但输入框纹丝不动——这几乎总是因为布局链路中某处被默认行为卡住：
- 父容器漏了
display: flex，比如外层是普通<div>或<form>，flex 属性根本不触发 - 误设了
flex-direction: column，此时flex-grow填的是高度，不是你想要的宽度 - 父容器宽度由内容撑开（比如没设
width，也没被祖先约束），flex-grow就无“剩余”可填 -
input[type="search"]在 Chrome/Safari 默认带min-width: 130px，这个值会直接压过伸缩逻辑
必须加 min-width: 0 的两个地方
min-width: auto 是浏览器对表单控件的 UA 默认行为，它优先级高于 width、flex-basis 甚至 flex-shrink: 1。只改 input 自身不够，必须同时作用于两层：
- 父级 flex item（例如
.input-wrapper）要设min-width: 0：否则它不会把剩余空间分给子元素，input 再怎么设width: 100%也只是100% × 0px - input 自身也要设
min-width: 0：解除 UA 对最小宽度的封锁，让它真正接受父级分配的宽度 - 别用
width: 100%+flex-grow: 1混用，它们逻辑冲突；更稳妥的是直接用flex: 0 1 0（不放大、可收缩、基准为 0）
IE11 和移动端 Safari 的兼容补丁
IE11 下单独写 flex-grow: 1 完全无效，它要求显式指定 flex-basis：
立即学习“前端免费学习笔记（深入）”；
- 必须写成
flex: 1 1 0或更可靠地写flex: 1 1 0px（0比0%更稳） - iOS Safari 对无约束 flex item 极其保守：若最外层容器（如
.form）没设width: 100%或max-width，input 可能塌缩成一条竖线 - 键盘弹出时视口高度突变，若父容器依赖
min-height: 100vh，高度坍缩会导致flex-grow失效——此时width: 100%+min-width: 0是唯一能兜底的方案
真正起效的从来不是单个属性，而是 display: flex → flex-direction: row → 父容器有宽 → 父 item 设 min-width: 0 → input 设 min-width: 0 这五步闭环。漏掉任意一环，都只是在调试幻觉。
