flex-grow: 1 生效需同时满足三个前提：父容器设 display: flex、主轴为横向（flex-direction: row）、父容器有明确宽度；否则即使属性显示激活也无效。
flex-grow: 1 不生效的三个硬性前提
它根本不是“写上就管用”的属性，而是依赖三样东西同时存在：父容器必须是 display: flex，主轴方向得是横向（flex-direction: row），且父容器自身要有明确的宽度（比如 width: 100% 或固定值）。缺一个，flex-grow: 1 就等于没写。
常见错误现象：input 死死卡在左边，右边大片空白；开发者工具里看到 flex-grow: 1 是绿色激活状态，但尺寸纹丝不动。
- 检查父级是否漏了
display: flex—— 这是最高频原因 - 确认没误设
flex-direction: column，否则flex-grow填的是高度，不是你想要的宽度 - 父容器若宽度由内容撑开（比如没设
width也没被约束），flex-grow就无“剩余”可填
input[type="search"] 的 min-width 是隐形拦路虎
Chrome 和 Safari 给 input[type="search"] 默认加了 min-width: 130px（甚至更高），这个值会直接压过 flex-grow 的计算逻辑——哪怕你写了 flex-grow: 1，浏览器也坚持不让它窄于 130px，结果就是撑不满。
解决方法只有一条：显式覆盖它。
- 给
input加min-width: 0，这是让flex-grow真正起效的关键补丁 - 别写
width: 100%或max-width，它们会和flex-grow冲突，优先级更高 - 如果按钮也在同一行，记得给它加
flex-shrink: 0，否则小屏下按钮被压缩，间接导致输入框“看起来没撑开”
IE11 兼容写法不能只写 flex-grow
IE11 支持 flex-grow，但它有个经典缺陷：如果没指定 flex-basis，它就完全不计算剩余空间。单独写 flex-grow: 1 在 IE11 中无效。
正确写法是用 flex 缩写，确保三项都明确：
input {
flex: 1 1 0%;
/* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0% */
}
- 必须写
flex-basis: 0%（或0），不能省略第三项 - 避免对
input使用width，IE11 会优先按 width 计算，忽略 flex 规则 - 父容器推荐用
display: flex，而不是display: inline-flex，后者在 IE11 中有时失效
移动端小屏下的宽度突变与溢出
大屏看着好好的搜索框，一到手机上就横向滚动或文字被截断，问题往往不在 input 本身，而在父容器没做响应式约束。
关键点是：Flex 自适应依赖父容器宽度，而父容器可能继承了过宽的祖先宽度。
- 给 Flex 父容器加
width: 100%或max-width: 100%，切断宽度过继承 - 给
input设min-width: 120px，防止被压到看不见提示文字 - 小屏（如
max-width: 480px）时，整块搜索区域改用flex-direction: column，让按钮换行到底部，而不是强行挤在同一行 - 按钮在 column 布局里别用
width: 100%，改用align-self: flex-start控制对齐
真正麻烦的不是怎么让它撑开，而是撑开之后，各种边界场景（缩放、输入法、暗色模式、老浏览器）全在悄悄破坏它——得一个个补漏，不是加一行 flex-grow: 1 就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
