移动端搜索框flex-grow填不满空间，是因为父容器缺flex上下文、主轴方向不明、宽度不可计算或input被默认min-width锁死。
移动端搜索框用 flex-grow 填不满剩余空间？不是属性没用，是父容器没给它“可填的空间”——必须同时满足 display: flex、主轴方向明确、宽度可计算、input 不被默认样式锁死这四个条件。
为什么写了 flex-grow: 1 却还是卡在左边
常见错误不是代码写错，而是布局上下文缺失。浏览器看到 flex-grow: 1，第一反应是：“父容器有 flex 上下文吗？主轴方向确定吗？剩余空间是多少？”——任一环节断掉，它就直接忽略。
- 父容器没设
display: flex或写了flex-direction: column（横向填充需要 row） -
<input type="search">自带浏览器默认min-width: auto，会阻止压缩和伸展，必须显式写min-width: 0 - 旁边按钮没加
flex-shrink: 0，小屏下被压扁，间接导致 input 可用空间变少 - 父容器本身没设
width: 100%或max-width: 100%，继承了祖先过宽的宽度，flex 计算失准
移动端键盘弹出时搜索框突然变窄或错位
iOS/Android 键盘拉起会重置视口高度，但部分机型（尤其是 iOS Safari）会同步影响宽度计算逻辑，导致 flex-grow 误判剩余空间。这不是 bug，是视口单位动态变化引发的连锁反应。
- 确保
<head>中有<meta name="viewport" content="width=device-width, initial-scale=1"> - 父容器加
width: 100%，切断宽度继承链，避免受祖先节点干扰 - 慎用
white-space: nowrap在按钮图标上，它会让内联内容拒绝收缩，撑开整个 flex 容器 - 用
box-sizing: border-box统一尺寸计算，防止 padding + border 导致超宽
如何让搜索框在小屏下不被压成一条线
flex-grow 本身不防压缩，它只负责“尽可能占满”，所以必须配合最小可用宽度约束，否则输入框可能缩到看不见 placeholder 文字。
立即学习“前端免费学习笔记（深入）”；
- 给
<input>加min-width: 120px（至少能显示“搜索…”） - 小屏（如
max-width: 480px）下改用flex-direction: column，让按钮换行到底部，而不是硬挤在同一行 - 按钮在 column 布局里别用
width: 100%，改用align-self: flex-start控制对齐 - iOS Safari 对
input[type="search"]有特殊圆角和清除按钮，必要时加appearance: none统一渲染
IE11 和旧 Android WebView 的兼容写法
IE11 的 flex-grow 在无明确 flex-basis 时行为不稳定；某些旧 WebView 会把 flex-basis: 0% 解析失败。不能只靠现代写法兜底。
- 不用
flex-grow: 1单独写，改用flex: 1 1 0（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - IE11 下父容器必须加
width: 100%，否则剩余空间计算为 0 - 避免在 input 上同时写
width和flex-grow，CSS 会优先按 width 计算基础尺寸，flex-grow后续分配被压制 - 旧环境建议外层包一层
<div class="search-input-wrapper">，把flex逻辑放在 wrapper 上，而非原生 input 元素
真正难的不是让搜索框“撑开”，而是让它在各种边界场景下（键盘弹起、横竖屏切换、长单词输入、iOS 渲染抖动）都保持可用宽度——这些细节不写进 CSS 规则里，光靠 flex-grow: 1 是撑不住的。
