搜索栏宽度在不同屏幕下自动适配
直接用 flex-grow: 1 是最轻量、兼容性最好的解法，但必须确保父容器是 display: flex 且有明确主轴方向。很多人卡在“写了 flex-grow 没反应”，其实是父级没设 flex 或子项被其他规则（比如 width 或 min-width）锁死了伸缩能力。
- 父容器必须设
display: flex，推荐加flex-wrap: nowrap防意外换行 - 搜索栏自身避免写死
width、max-width或flex-basis: 0（除非你明确要重置基准） - 如果旁边有按钮或图标，给它们设
flex-shrink: 0，否则小屏下按钮会被压缩变形
Flex-grow 1 不生效的三个典型原因
常见错误不是代码写错，而是布局上下文没理清。比如把搜索栏放进 div 后又套了一层 form，结果 form 默认是块级元素，没设 display: flex，flex-grow 就完全不触发。
- 父容器没设
display: flex—— 这是最常漏的一环 - 搜索栏被
float、position: absolute或display: inline-block干扰了 flex 子项身份 - 用了
flex: 1却忘了它等价于flex: 1 1 0%，而某些旧版 Safari 对0%解析异常，稳妥起见可显式写flex: 1 1 auto
移动端键盘弹出时搜索栏被顶起或截断
这不是 flex-grow 的问题，而是视口高度变化导致 flex 容器高度塌陷。iOS Safari 尤其明显：软键盘弹出后，vh 单位失效，flex 容器可能失去参考高度，子项拉伸失效甚至溢出。
- 避免对搜索栏父容器设固定
height或min-height: 100vh - 改用
min-height: 100dvh（dvh是动态视口单位，Safari 16.4+ 支持） - 若需兼容老 iOS，可用 JS 监听
resize，动态更新容器min-height，但仅当真出现截断才加——多数情况只加flex-shrink: 0给兄弟元素就够了
和 width: 100%、max-width 混用的风险
width: 100% 和 flex-grow: 1 在同一元素上共存，行为不可预测：Chrome 可能优先按 width 计算，Firefox 可能按 flex 规则覆盖。尤其当父容器有 padding 或 border 时，width: 100% 会撑破盒模型，而 flex-grow 天然尊重 box-sizing: border-box。
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
width: 100%、width: 100vw等显式宽度声明 - 如需限制最大宽度，只在搜索栏上设
max-width: 600px，flex-grow仍会从 0 拉伸到该值为止 - 别给搜索栏设
flex-basis以外的尺寸属性，它会和flex-grow抢控制权
flex-grow: 1，而是它所依赖的整个 flex 上下文是否干净——父级、兄弟节点、全局 box-sizing、甚至第三方 UI 库偷偷加的 !important，都可能让这行代码静默失效。 
