如何用CSS Flex实现自适应搜索框？

flex-grow: 1 单独写无效，必须配合 display: flex、min-width: 0 及兄弟元素 flex-shrink: 0 才能撑满剩余空间；父容器未设 display: flex 是最常见失效原因，input[type="search"] 的 min-width: auto 会锁死伸缩，IE11 和 iOS 键盘弹出亦导致计算失准。

flex-grow: 1 单独写没用，必须配合 display: flex、min-width: 0 和兄弟元素的 flex-shrink: 0 才能真正撑满剩余空间。

父容器没设 display: flex 是最常见失效原因

哪怕 HTML 结构里套了五层 div，只要搜索框的直接父容器没写 display: flex，flex-grow: 1 就完全不参与计算——浏览器压根不启动 Flex 分配逻辑。

1. 检查目标 input 的**直接父元素**是否声明了 display: flex（不是祖先，不是 inline-flex）
2. 避免用 form 或 header 标签“默认就是 Flex”的错觉，它们默认是 block
3. 如果父容器用了 flex-wrap: wrap，flex-grow 在小屏换行后基本失效，单行场景才可靠

input[type="search"] 的 min-width: auto 会锁死伸缩

Chrome 和 Safari 给 input[type="search"] 设了隐式 min-width: 130px（甚至更高），它比 flex-grow 的计算优先级还高，导致输入框卡在左侧不动。

1. 必须显式覆盖：min-width: 0 —— 不能省略，不能靠继承，不能写成 min-width: unset
2. 别同时写 width: 100% 或 max-width，它们会覆盖 flex-basis，让 flex-grow 失效
3. 移动端需额外加 min-width: 120px 防止过窄，这是人工设定的“可读底线”，不是靠 flex 自动推导

按钮没加 flex-shrink: 0 会导致输入框“看起来没撑开”

按钮宽度固定（比如 44px），但若没声明 flex-shrink: 0，小屏下它会被压缩变形，间接挤占 input 可用空间，造成视觉上“撑不满”的假象。

1. 按钮推荐写法：flex-shrink: 0; width: 44px;，不依赖内容宽度
2. 避免用 flex: none，IE11 下支持不稳定；flex: 0 0 auto 更稳妥
3. 如果按钮是图标字体（如 Font Awesome），加 white-space: nowrap 防文字换行撑宽容器

IE11 和 iOS 键盘弹出是两个典型崩坏点

IE11 对 flex-grow 支持极弱，iOS 键盘拉起时视口高度突变，都会让 Flex 剩余空间计算失准，此时单纯调样式没用。

1. IE11 必须改用完整简写：flex: 1 1 0（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0），且绝不能给 input 设 width
2. iOS 键盘弹出时，vh 失效，若父容器依赖 min-height: 100vh，整个 Flex 容器高度坍缩——得加 width: 100% 切断宽度继承链
3. 焦点态禁止在 :focus 里改 width、padding 或 border，用 outline: none + box-shadow 模拟，初始边框预留透明色

真正麻烦的不是怎么让它撑开，而是撑开之后，各种边界场景（缩放、输入法、暗色模式、老浏览器）全在考验你对 Flex 上下文的理解深度。