flex-grow: 1 不生效，首要检查父容器是否设 display: flex 且 input 是否显式声明 min-width: 0；若父容器未启用 flex 上下文或 input 被默认 min-width: auto 锁定尺寸，则该属性完全被忽略。
flex-grow: 1 不生效？先检查父容器和 min-width
直接给 input 加 flex-grow: 1 却不撑满，大概率是父容器没设 display: flex，或者 input 的默认 min-width: auto 在拦着它伸展。
常见错误现象：搜索框卡在左侧，右边留白，哪怕写了 flex-grow: 1 也纹丝不动。
- 确保父容器是
display: flex，且没写flex-direction: column（横向布局才生效） -
input必须显式加min-width: 0，否则它会按内容最小宽度“锁死” - 旁边有按钮（比如搜索图标）时，给它加
flex-shrink: 0，否则它会被压缩变形
移动端输入框溢出容器？控制父容器宽度边界
Flex 自适应依赖父容器宽度，但很多布局里父容器本身没做响应式约束（比如没设 max-width 或 width: 100%），导致小屏下 input 硬撑、触发横向滚动。
- 给 Flex 容器加
width: 100%或max-width: 100%，避免继承过宽的祖先宽度 - 慎用
white-space: nowrap在按钮或标签上——它会让内联内容拒绝换行，间接撑开容器 - 统一用
box-sizing: border-box，防止padding+border叠加后超宽
IE11 兼容性问题？别信 flex-grow，改用 flex-basis
IE11 对 flex-grow 支持不稳定，尤其在混合单位或嵌套场景下容易失效。它更认 flex: 1 的简写，但前提是必须配合 flex-basis: 0。
- 在 IE11 中，
input推荐写成flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 同时禁用
width相关设置（如width: 100%），它会与flex-basis冲突 - 如果按钮用了字体图标（如 Font Awesome），记得给
i标签设flex-shrink: 0，否则 IE11 可能把它压扁
焦点态跳动？outline 换成 box-shadow
原生 input 聚焦时的 outline 会改变元素尺寸，导致整个搜索栏轻微“跳动”，尤其在窄屏或高缩放比下明显。
- 用
outline: none去掉默认 outline - 改用
box-shadow: 0 0 0 2px #007bff模拟聚焦边框（颜色可调） - 加上
transition: box-shadow 0.2s让过渡更自然
min-width: 0 和父容器的 width 边界控制——这两点不处理，其他再精细的 flex 设置都白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
