flex-grow: 1 不生效不是属性错误，而是父容器缺失 display: flex、主轴方向不明确、无剩余空间可分，或子元素被 min-width: auto 等默认样式锁死，任一环节断裂即静默失效。
直接写 flex-grow: 1 不管用，是因为它只在父容器有 flex 上下文且子元素没被默认样式锁死时才生效——不是属性失效，是布局链路断了。
为什么写了 flex-grow: 1 却不撑满？
浏览器看到这个声明，第一反应是查四件事：父容器有没有 display: flex？主轴是不是 row？剩余空间能不能算出来？<input> 自身有没有被 min-width: auto 拦住？任一环节失败，它就静默忽略。
- 父容器漏写
display: flex（比如套在<form></form>或普通<div> 里） <li> <code><input type="search">默认带min-width: auto，必须显式覆盖为min-width: 0 - 旁边按钮用了
width: 40px却没加flex-shrink: 0，小屏下被压扁，间接挤占 input 空间 - 全局 CSS 或 UI 库注入了
width: 100%或!important，直接覆盖 flex 行为 -
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 - iOS 键盘弹起时，
vh失效，若父容器依赖min-height: 100vh，高度坍缩，flex-grow就无空间可分 - 确保
里有<meta name="viewport" content="width=device-width, initial-scale=1"> - 给搜索框父容器加
width: 100%或max-width: 100%，防它继承祖先过宽宽度 - 别在
:focus里改padding、border或width，这些会触发重排，加剧跳动 - 焦点态优先用
box-shadow替代outline，并设box-sizing: border-box
flex-grow: 1 和 flex: 1、width: 100% 的区别在哪？
三者视觉可能一样，但底层逻辑冲突，混用必出问题：
移动端键盘弹出后搜索框变窄或错位怎么办？
这不是 flex-grow 的 bug，是视口高度突变导致 flex 容器失去计算基准：
立即学习“前端免费学习笔记（深入）”；
真正麻烦的从来不是那行 flex-grow: 1，而是它所依赖的整个 flex 上下文是否干净——父级、兄弟节点、全局 box-sizing、甚至第三方 UI 库偷偷加的 !important，都可能让这行代码静默失效。
