flex: 1 + min-width: 0 是输入框自适应的硬性条件，因浏览器对 input 设有隐式 min-width（Chrome 约 120px），不设 min-width: 0 则 flex: 1 无法突破该限制，导致小屏下溢出、按钮错位；二者缺一不可。
为什么 flex: 1 + min-width: 0 是输入框自适应的硬性条件
浏览器给 <input> 设了隐式最小宽度（Chrome 约 120px），哪怕父容器是 display: flex 且写了 flex: 1，它也不会缩得比这个值小。结果就是：小屏下输入框卡住、按钮被挤出、整个搜索栏换行失败或溢出。
必须同时满足两个条件才真正释放收缩能力：
-
flex: 1提供弹性分配空间的能力 -
min-width: 0覆盖浏览器默认的min-width: auto，否则flex: 1形同虚设
漏掉任一，1fr 或 flex-grow: 1 都只是摆设。
按钮为什么不能设 width、flex-basis 或 min-width
按钮宽度应由内容（文字/图标）、padding 和 border 自然决定。一旦加了 width: 100%、flex-basis: 100px 或 min-width: 80px，它就不再“诚实”，会抢占本该留给输入框的空间，尤其在窄屏下直接压垮布局。
立即学习“前端免费学习笔记（深入）”；
安全做法是让它保持“无约束”状态：
- 不写任何宽度相关属性（
width、flex-basis、min-width） - 加
white-space: nowrap防止文字换行导致宽度误判 - 若需微调，只用
padding和font-size
父容器必须显式声明宽度继承链
很多布局崩塌不是因为子元素写错了，而是父容器没“接住”宽度。比如用 position: absolute 包裹搜索栏但没设 width: inherit，或者外层 <div> 没设 width: 100%，导致内部 input 的 flex: 1 计算基准丢失。
关键补位点：
- 最外层容器（如
.search-bar）加width: 100%或max-width: 100% - 若用
absolute定位弹层类组件，必须配width: fit-content+min-width+left/right显式锚定 - 移动端务必有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则所有宽度计算都错乱
移动端键盘弹出时搜索框突然变窄或消失
这不是 CSS 写错了，而是视口高度突变导致 flex 容器失去计算依据。iOS 键盘弹起后，100vh 失效，如果父容器依赖 min-height: 100vh，高度坍缩，flex: 1 就没空间可分。
绕过方式很具体：
- 避免在
:focus里改padding、border或width—— 这些触发重排，加剧跳动 - 用
min-height: 100dvh（Chrome 105+/Safari 16.4+），降级 fallback 为min-height: 100vh - 确保搜索框在**可滚动容器内**，且该容器有明确高度约束，
scroll-margin-bottom才能生效
最容易被忽略的，是把弹层方案（position: absolute + fit-content）直接套在主搜索框上——它解决的是下拉建议，不是输入框本体的自适应。
