最简方案是父容器设 display: flex 并用 flex-grow: 1，但需配合 flex-basis: auto（IE11 必须写 flex: 1 1 auto）、min-width 防压缩、重置 input 默认样式、固定按钮宽度且 flex-shrink: 0，移动端用媒体查询切 column 布局。
search输入框用flex-grow撑满父容器剩余空间
直接用 flex-grow: 1 是最简方案，但必须确保父容器是 display: flex 且有明确主轴方向。很多人卡在父级没设 flex 或忘了清除子元素默认 margin/padding。
- 父容器需设
display: flex，推荐加align-items: center垂直对齐按钮和输入框 -
<input type="search">默认有浏览器内置 padding 和 border，不同浏览器差异大，务必重置：margin: 0; padding: 0.5em; border: 1px solid #ccc; - 搜索按钮（如
<button type="submit"></button>）建议固定宽度，否则它也会被 flex 影响；可加flex-shrink: 0防压缩 - 别给 input 设
width: 100%—— 它会和flex-grow冲突，导致布局错乱
移动端小屏下搜索框缩窄或换行的处理逻辑
单纯靠 flex-grow 无法解决小屏挤压问题。真正起效的是配合 min-width 和媒体查询限制最小可用宽度，否则输入框可能被压到看不见文字。
- 给 input 加
min-width: 120px（至少能显示“搜索…”提示），避免极端压缩 - 小屏（如
max-width: 480px）时，把整个搜索区域设为flex-direction: column，让按钮换行到下方 - 按钮本身别用
width: 100%，否则在 column 布局里会撑宽整个容器；改用align-self: flex-start控制对齐 - 注意 iOS Safari 对
input[type="search"]的特殊样式（带圆角和 × 清除按钮），必要时用appearance: none统一
IE11 下 flex-grow 不生效的兼容写法
IE11 支持 flex-grow，但有个经典坑：父容器若没设 flex-basis，它可能完全不计算剩余空间。不是不能用，是得补一行关键声明。
- 父容器的 input 子元素必须同时写：
flex: 1 1 auto（等价于flex-grow: 1; flex-shrink: 1; flex-basis: auto） - 单独写
flex-grow: 1在 IE11 中无效，必须配flex-basis - 如果父容器是
inline-flex，IE11 有时会忽略宽度计算，优先用display: flex - 避免在 IE11 中混用
width和flex，尤其不要给 input 设width: 0—— 它会让 flex 计算崩掉
搜索框聚焦时宽度突变的修复方法
常见现象：点击 input 后，边框变粗、内边距微调、或者 outline 导致整体宽度跳动。这不是 flex 问题，是 focus 状态下的样式抖动。
立即学习“前端免费学习笔记（深入）”；
- 统一 focus 样式：
outline: none; box-shadow: 0 0 0 2px rgba(0,100,255,0.3);替代原生 outline - 所有状态（
:focus,:hover,:active）都保持border-width和padding不变 - 如果用了
transition，确保只过渡 color/background，别动 padding/border/width - 某些 UI 框架（如 Bootstrap）会给
input:focus加outline-offset，这会导致视觉偏移，显式设为outline-offset: 0
flex-grow 看似简单，但实际要稳住宽度，得同时控住父容器、子元素默认样式、IE 兼容细节、以及 focus 状态下的盒模型稳定性。最容易漏的是 flex-basis 和 min-width 这两个值 —— 它们不显眼，但缺一个，小屏或旧浏览器里就立刻露馅。
