flex-grow: 1 要生效需满足前提：父容器设 display: flex、input 设 min-width: 0、兄弟元素加 flex-shrink: 0、无 width: 100% 等覆盖规则，且移动端需处理视口变化与 box-sizing。
flex-grow: 1 本身不能让搜索框“自适应宽度”，它只在父容器是 display: flex 且有剩余空间时才起作用；写上却没效果，大概率是布局前提不满足，不是代码写错了。
为什么写了 flex-grow: 1 却不撑满
最常见原因不是语法错，而是 flex 布局链路中某处被默认行为卡住：
- 父容器没设
display: flex—— 比如外层是<form>或普通<div>，没加这行，flex-grow完全不触发 -
<input type="search">默认有min-width: auto，会阻止它收缩，更别说伸展；必须显式写min-width: 0 - 旁边按钮用了
width: 40px但没加flex-shrink: 0，小屏下按钮被压扁，反而挤占input空间 - 全局 CSS 或 UI 库偷偷加了
width: 100%或!important规则，直接覆盖 flex 行为 - 移动端键盘弹出后搜索框变窄或错位 —— 这不是
flex-grow的 bug，是视口高度突变导致 flex 容器失去计算基准
flex-grow: 1 和 flex: 1、width: 100% 的区别
三者视觉上都可能“填满”，但底层逻辑完全不同，混用必出问题：
-
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%更可靠
移动端键盘弹起后搜索框错位或缩窄
这不是 flex-grow 的问题，而是视口变化导致 flex 容器高度坍缩：
立即学习“前端免费学习笔记（深入）”；
- iOS 键盘弹起时，
vh失效；若父容器依赖min-height: 100vh，高度坍缩，flex-grow就无剩余空间可分 - 确保
<head>里有<meta name="viewport" content="width=device-width, initial-scale=1">，否则 Safari 可能强制缩放，整个 flex 布局失准 - 给搜索框父容器加
width: 100%或max-width: 100%，防它继承祖先过宽的宽度，间接缓解横向溢出 - 别在
:focus里改padding、border或width，这些会触发重排，加剧跳动
flex-grow 加 transition 为啥动画跳变
flex-grow 无法直接过渡，因其为非数值型计算属性，无中间状态；浏览器无法对 auto 或动态计算的宽度做插值动画：
- 直接给
input同时设flex-grow: 1和transition: width 0.3s，动画大概率失效或突变 - 起始状态若为
width: auto，结束状态是width: 240px，浏览器无中间值可算，直接跳 - 真正能动的写法：用
max-width+overflow: hidden，或transform: scaleX()配合will-change: transform - 必须加
box-sizing: border-box，否则padding和border会让视觉宽度超出预期
真正让搜索框“自适应”的，从来不是某个单一属性，而是 flex 上下文是否干净、min-width 是否重置、兄弟元素是否隔离、以及移动端视口行为是否被正确处理 —— 这些细节比写对 flex-grow: 1 更容易被忽略。
