flex-grow: 1 单独写上去，通常不会直接生效；如果想让元素真正占满剩余空间，前提条件必须同时满足：父容器需要设置 display: flex，目标元素本身建议补上 min-width: 0，并且兄弟元素还应设置 flex-shrink: 0。在实际排查 CSS Flex 搜索框自适应问题时，最常见的原因就是父容器根本没有声明 display: flex；此外，input[type="search"] 默认的 min-width: auto 也会直接限制伸缩效果，再加上 IE11 与 iOS 键盘弹出时本身就可能导致布局计算偏差，因此页面表现往往更容易出现不准或错位。
flex-grow: 1 单独写通常不起作用，必须结合 display: flex、min-width: 0 以及兄弟元素的 flex-shrink: 0，才能让搜索框在 Flex 布局中真正撑满剩余空间。
父容器没设 display: flex 是最常见的失效原因
即使 HTML 结构中嵌套了多层 div，只要搜索框的直接父容器没有写 display: flex，那么 flex-grow: 1 就不会参与任何计算——因为浏览器根本不会开启 Flex 布局的剩余空间分配机制。
- 先检查目标
input的**直接父元素**是否明确声明了display: flex（不是祖先元素，也不要误以为inline-flex可以完全等同替代当前场景） - 避免把
form或header标签误认为“默认就是 Flex”，它们默认仍然是 block 布局 - 如果父容器启用了
flex-wrap: wrap，那么flex-grow在小屏换行后往往难以稳定生效，自适应搜索框更适合单行布局场景
input[type="search"] 的 min-width: auto 会直接限制伸缩
Chrome 和 Safari 往往会给 input[type="search"] 附带隐式的 min-width: 130px（有时甚至更大），而这个默认限制的优先影响比 flex-grow 的拉伸计算更直接，因此常常导致搜索输入框卡在左侧，无法按预期自适应扩展。
- 必须显式覆盖：
min-width: 0—— 这一项不能省略，不能指望继承，也不建议写成min-width: unset - 不要同时再写
width: 100%或max-width，否则它们可能覆盖flex-basis的行为，进而让flex-grow失去作用 - 移动端可以额外补充
min-width: 120px，防止输入框过窄；这属于人为设置的可读性下限，并不是 Flex 自动计算出来的结果
按钮没加 flex-shrink: 0 会让输入框“看起来没有撑开”
按钮宽度通常是固定的（例如 44px），但如果没有声明 flex-shrink: 0，在小屏幕环境下它就可能被压缩变形，进而间接挤占 input 的可用空间，最终造成视觉上“搜索框没有占满剩余宽度”的错觉。
- 按钮更推荐的写法是：
flex-shrink: 0; width: 44px;，这样无需依赖内容本身来撑开宽度 - 尽量避免直接使用
flex: none，因为 IE11 下支持并不稳定；改用flex: 0 0 auto会更稳妥 - 如果按钮使用的是图标字体（如 Font Awesome），建议加上
white-space: nowrap，避免文字换行后把容器意外撑宽
IE11 和 iOS 键盘弹出是两个典型的布局崩坏点
IE11 对 flex-grow 的支持本身就比较弱，而 iOS 在键盘弹出时又会引发视口高度突变，这两种情况都会导致 Flex 剩余空间的计算出现偏差，此时仅靠简单调整样式通常无法彻底解决问题。
- IE11 中应改用完整简写：
flex: 1 1 0（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），并且不要再给input单独设置width - iOS 键盘弹出时，
vh可能失效；如果父容器依赖min-height: 100vh，整个 Flex 容器就可能发生高度坍缩——这时需要补上width: 100%来切断宽度继承链 - 焦点态不要在
:focus中修改width、padding或border，更推荐用outline: none+box-shadow模拟焦点效果，并在初始状态预留透明边框
真正棘手的并不是“如何让搜索框撑开”，而是在撑开之后，缩放、输入法、暗色模式以及老旧浏览器等各种边界场景，都会持续考验你对 Flex 布局上下文和自适应搜索框实现细节的理解是否足够扎实。
