flex-grow: 1 仅在父容器为 display: flex 且主轴有剩余空间时按比例分配空间，不解决键盘弹出、内容自适应等问题，常见失效原因包括父容器未设 flex、input 的 min-width: auto 未重置、兄弟元素压缩、全局样式覆盖及视口变化导致基准丢失。
flex-grow 本身不能让搜索框“自适应内容”或“响应键盘弹出”，它只负责在父容器主轴有剩余空间时，按比例分配那部分空间。真正能用它撑满 logo 和按钮之间的空隙，前提是整个 flex 上下文干净、可控。
为什么写了 flex-grow: 1 却不撑满
最常见原因不是代码写错，而是布局链路中某处被默认行为卡住：
- 父容器没设
display: flex—— 比如外层是<form></form>或普通<div>，没加这行，<code>flex-grow完全不触发 -
<input type="search">默认有min-width: auto，会阻止它收缩，更别说伸展；必须显式写min-width: 0 - 旁边按钮用了
width: 40px但没加flex-shrink: 0，小屏下按钮被压扁，反而挤占 input 空间 - 全局 CSS 或 UI 库偷偷加了
width: 100%或!important规则，直接覆盖 flex 行为 - iOS 键盘弹起时，
vh失效，若父容器依赖min-height: 100vh，高度坍缩，flex-grow就无剩余空间可分 - 确保
里有<meta name="viewport" content="width=device-width, initial-scale=1">，否则 Safari 可能强制缩放，整个 flex 布局失准 - 给搜索框父容器加
width: 100%或max-width: 100%，防它继承祖先过宽的宽度，间接缓解横向溢出 - 别在
:focus里改padding、border或width，这些会触发重排，加剧跳动 -
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: 1 1 auto，单独flex-grow: 1不生效；flex-basis: 0比0%更可靠 - 写
transition: width 0.3s+flex-grow: 1，大概率跳变，尤其在 Safari 下 - 真正可动画的方案：用
max-width控制伸展上限（如max-width: 0 → max-width: 320px），配合overflow: hidden - 更顺滑的做法是
transform: scaleX(0) → scaleX(1)，加transform-origin: left center锚定左端，激活前动态加will-change: transform - 无论哪种，都必须配
box-sizing: border-box，否则padding和border会让视觉宽度超出预期
移动端键盘弹出后搜索框变窄或错位
这不是 flex-grow 的 bug，是视口高度突变导致 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、width: 100% 的实际区别
三者视觉上都可能“填满”，但底层逻辑完全不同，混用必出问题：
想加展开/收起动画？别碰 flex-grow
flex-grow 是布局计算属性，无法过渡。浏览器不支持对它做插值动画：
真正麻烦的从来不是那行 flex-grow: 1，而是它所依赖的整个上下文是否干净：父级有没有被 float 干扰、兄弟节点有没有偷偷加 width、全局有没有漏掉 box-sizing: border-box、甚至第三方库的 !important 规则——这些都会让这行代码静默失效。
