搜索框在Flex容器里不撑满，根本原因是父容器未设display: flex或input默认min-width:auto阻止伸展；必须显式设置display:flex、min-width:0、按钮加flex-shrink:0，并避免width冲突。
搜索框在Flex容器里不撑满怎么办
直接写 flex-grow: 1 却没效果，大概率是父容器没设 display: flex，或者 input 默认的 min-width: auto 拦住了伸展。常见现象是输入框卡在左侧、右边大片留白。
- 父容器必须显式声明
display: flex，且主轴方向为水平（flex-direction: row是默认值，不用额外写） - 给
<input>加min-width: 0—— 这是关键，否则浏览器会按内容最小宽度锁定，flex-grow 就失效了 - 旁边有按钮时，务必给按钮加
flex-shrink: 0，否则它会被压缩变形 - 别写
width: 100%，它和flex-grow冲突，会导致布局错乱
移动端小屏下搜索框被压扁或换行异常
单纯靠 flex-grow 无法应对小屏挤压，尤其当父容器没做宽度约束时，input 可能硬撑导致横向滚动或文字被截断。
- 给父 Flex 容器加
width: 100%或max-width: 100%，防止继承祖先过宽的尺寸 - 给
<input>设min-width: 120px（至少能显示“搜索…”提示），避免压缩到不可用 - 小屏（如
max-width: 480px）时，把整个搜索区域切为flex-direction: column，让按钮换行到底部 - 按钮在 column 布局中别用
width: 100%，改用align-self: flex-start控制对齐
IE11 中 flex-grow 不生效或错位
IE11 支持 flex-grow，但有个经典坑：没配 flex-basis 就完全不计算剩余空间。不是不能用，是得补一行关键声明。
- 必须写
flex: 1 1 0（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），单独写flex-grow: 1在 IE11 中无效 - 避免对
<input>使用width，IE11 会优先按 width 计算，直接忽略 flex 规则 - 父容器别用
inline-flex，IE11 对它的宽度计算不稳定，优先用display: flex - 慎用
flex-wrap: wrap，IE11 可能误判主轴尺寸，建议只在单行场景用 flex-grow
聚焦时搜索框宽度跳动或边框抖动
这不是 flex 问题，是 focus 状态下 outline、border 或 box-shadow 变化引发的重排。视觉上表现为点击后整体“一跳”。
立即学习“前端免费学习笔记（深入）”；
- 统一关掉原生
outline：outline: none，改用box-shadow: 0 0 0 2px rgba(0,100,255,0.3)模拟焦点环 - 如果必须保留边框，初始状态就写
border: 2px solid transparent，聚焦时只变色，不改变尺寸 - 避免在
:focus里改width、padding或margin，这些都会触发 layout - 确保全局用了
box-sizing: border-box，否则 padding + border 会叠加出额外宽度
min-width: 0 和 IE11 下的 flex-basis 补全——这两处一漏，整套 flex 自适应就卡死。 
