flex-grow: 1 对 input 无效是因为其默认 min-width: auto（chrome 约 120px），需显式设 min-width: 0；兄弟元素需加 flex-shrink: 0 防压缩；推荐用 flex: 0 1 0 替代 flex: 1；移动端需修复 viewport 和宽度链路。
flex-grow: 1 为什么对 不起作用
不是 flex-grow 写错了，而是 <input> 默认带 min-width: auto（Chrome 下约 120px），它会强行阻止收缩，也干扰伸展逻辑——哪怕父容器已是 display: flex，flex-grow: 1 也会被架空。
必须显式覆盖这个默认行为：
-
min-width: 0是硬性要求，不是可选项 - 避免同时设
width: 100%或固定值，它和 flex 规则冲突 - 若父容器是
flex-direction: column，flex-grow在竖向主轴才生效，横向无效
flex-shrink: 0 必须加在按钮/图标上
搜索栏右侧常有放大镜图标或发送按钮，它们和 <input> 同级。如果不加 flex-shrink: 0，小屏下这些元素会被压缩变形，甚至挤占 的空间，导致输入框变窄或错位。
推荐写法：
- 按钮类元素：加
flex-shrink: 0，并配合width或min-width固定尺寸 - 不要只靠
width: 40px，没flex-shrink: 0就等于没锁住 - 图标用
<svg></svg>或<i></i>时，也需确保其父容器或自身有明确的 flex 行为约束
flex: 0 1 0 比 flex: 1 更适合搜索框
flex: 1 看似简洁，但它等价于 flex: 1 1 0%，第二个 1 是 flex-shrink: 1 —— 这意味着空间不足时，输入框会被压扁，影响可操作性。
更稳妥的组合是：
-
flex: 0 1 0：不放大、可收缩、基准为 0（比0%更可靠，尤其在 IE11） - 或拆开写：
flex-grow: 0; flex-shrink: 1; flex-basis: 0; - 若完全不允许收缩，就用
flex: 0 0 0; min-width: 200px;
移动端键盘弹出后布局错乱的根本原因
iOS 键盘弹起时，vh 失效，若父容器依赖 min-height: 100vh，高度坍缩，flex-grow 就没剩余空间可分；Safari 还可能因 viewport 缩放导致整个 flex 布局失准。
关键补救措施：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在 - 搜索框父容器加
width: 100%或max-width: 100%，切断祖先宽度继承链 - 避免在
:focus里改padding、border或width，这些会触发重排，加剧跳动
真正起效的不是单个属性，而是一组协同约束：父容器 display: flex + <input> 的 min-width: 0 + 兄弟元素的 flex-shrink: 0 + 视口与宽度链路的完整性。漏掉任意一环，flex-grow 都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
