flex-grow: 1 不生效不是属性错误，而是父容器缺失 display: flex、主轴方向不明确、无剩余空间可分，或子元素被 min-width: auto 等默认样式锁死，任一环节断裂即静默失效。

直接写 flex-grow: 1 不管用，是因为它只在父容器有 flex 上下文且子元素没被默认样式锁死时才生效——不是属性失效，是布局链路断了。

为什么写了 flex-grow: 1 却不撑满？

浏览器看到这个声明，第一反应是查四件事：父容器有没有 display: flex？主轴是不是 row？剩余空间能不能算出来？ 自身有没有被 min-width: auto 拦住？任一环节失败，它就静默忽略。

• 父容器漏写 display: flex（比如套在
  或普通
  里）
• 默认带 min-width: auto，必须显式覆盖为 min-width: 0
• 旁边按钮用了 width: 40px 却没加 flex-shrink: 0，小屏下被压扁，间接挤占 input 空间
• 全局 CSS 或 UI 库注入了 width: 100% 或 !important，直接覆盖 flex 行为

flex-grow: 1 和 flex: 1、width: 100% 的区别在哪？

三者视觉可能一样，但底层逻辑冲突，混用必出问题：


PigX UI 前端开发
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
下载
• flex: 1 是简写，等价于 flex: 1 1 0% —— 第二个 1 表示 flex-shrink: 1，空间不足时会被压缩；多数场景应改用 flex: 0 1 0（不放大、可收缩、基准为 0）
• width: 100% 让 input 强行占满整个父容器，无视兄弟元素，常把右侧按钮挤出视口
• flex-grow: 1 只作用于主轴剩余空间，前提是父容器是 display: flex 且主轴方向明确（默认 row）
• IE11 下单独 flex-grow: 1 不生效，必须写 flex: 1 1 auto 或更稳妥的 flex-basis: 0

移动端键盘弹出后搜索框变窄或错位怎么办？

这不是 flex-grow 的 bug，是视口高度突变导致 flex 容器失去计算基准：

• iOS 键盘弹起时，vh 失效，若父容器依赖 min-height: 100vh，高度坍缩，flex-grow 就无空间可分
• 确保 里有
• 给搜索框父容器加 width: 100% 或 max-width: 100%，防它继承祖先过宽宽度
• 别在 :focus 里改 padding、border 或 width，这些会触发重排，加剧跳动
• 焦点态优先用 box-shadow 替代 outline，并设 box-sizing: border-box

真正麻烦的从来不是那行 flex-grow: 1，而是它所依赖的整个 flex 上下文是否干净——父级、兄弟节点、全局 box-sizing、甚至第三方 UI 库偷偷加的 !important，都可能让这行代码静默失效。