flex-grow: 1 在移动端不生效的根本原因是浏览器未启动 flex 分配逻辑，需确保父容器显式设 display: flex、input 的 min-width: 0、兄弟元素 flex-shrink: 0、视口 meta 正确及避免 IE11 等兼容性陷阱。

flex-grow: 1 为什么在移动端不生效

写了 flex-grow: 1 却卡在左边、右边留白，根本不是属性写错了，而是浏览器压根没启动 flex 分配逻辑。它第一眼就检查：父容器有没有 display: flex？主轴是不是 row？input 有没有被 min-width: auto 锁死？任一条件不满足，flex-grow 就直接被忽略。

• 父容器必须显式设 display: flex，不能只靠祖先节点“继承”来凑
• input[type="search"] 默认有 min-width: auto，必须手动覆盖为 min-width: 0
• 旁边按钮（如搜索图标）若没加 flex-shrink: 0，小屏下会被压缩，间接挤占 input 可用空间
• 父容器本身没设 width: 100% 或 max-width: 100%，可能继承了过宽的祖先宽度，导致 flex 剩余空间计算失准

移动端键盘弹出后搜索框突然变窄

iOS 和部分安卓 WebView 在键盘拉起时会重置视口高度，进而影响宽度基准——这不是 bug，是 vh 失效、flex 容器失去可分配空间的连锁反应。

• 确保 中有 <meta name="viewport" content="width=device-width, initial-scale=1">
• 给搜索框的直接父容器加 width: 100%，切断宽度继承链
• 避免在 :focus 里改 padding、border 或 width，这些会触发重排，加剧跳动
• 慎用 white-space: nowrap 在按钮或图标上，它会让内联内容拒绝收缩，撑开整个 flex 容器

IE11 和旧 WebView 下 flex-grow 完全失效

IE11 对 flex-grow 的支持极不稳定：嵌套场景下常不生效，flex-basis: 0% 解析失败，甚至优先按 width 属性计算而无视 flex 规则。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 不用单独写 flex-grow: 1，改用完整简写 flex: 1 1 0（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0）
• 绝对不要给 input 设 width，IE11 会直接绕过 flex 逻辑
• 如果父容器用了 flex-wrap: wrap，IE11 可能误判主轴尺寸，建议仅用于单行布局
• 旧 Android WebView 对 flex-basis: 0 支持更好，比 0% 更可靠

想让搜索框随输入文字变宽？flex-grow 不管用

flex-grow 只响应父容器剩余空间，和输入内容长度完全无关。输 1 个字或 20 个字，宽度都不会变——除非你手动监听并干预。

立即学习“前端免费学习笔记（深入）”；

• 必须先加 min-width: 0，否则默认 min-width: auto 会锁死最小宽度
• 监听 input 的 input 事件，读取 element.scrollWidth（含 padding 的真实内容宽度）
• 用 requestAnimationFrame 批量更新 style.minWidth，避免频繁重排；防抖阈值建议 ≥ 30ms
• 移动端需额外监听 focus 和 blur，键盘收起后重置为基准宽度（如 120px）
• 动画别碰 width，改用 max-width + transform 实现平滑伸缩

真正麻烦的不是写对 flex-grow: 1，而是它一旦生效，就会暴露所有上游问题：视口变化、全局样式污染、兄弟元素收缩行为、暗色模式下的 outline 重绘……这些不会在开发时立刻报错，但会在真机测试中集中爆发。