移动端两栏自适应搜索栏需同时设置flex: 1、min-width: 0和box-sizing: border-box才能正常收缩，缺一不可；键盘弹出时应使用100dvh替代100vh防布局错乱。
移动端两栏自适应搜索栏（输入框 + 按钮）用 flex 实现，关键不是“怎么排”，而是“怎么缩”——input 有浏览器硬编码的隐式最小宽度（Chrome 约 120px），不主动打破它，flex: 1 就是无效语法。
为什么 flex: 1 在 input 上写了却缩不到小屏宽度
这不是写错了，是浏览器替你加了锁：input 默认 min-width: auto，这个“auto”在多数引擎里解析为内容固有宽（比如文字+padding+border 的自然宽度），哪怕父容器设了 display: flex，它也宁可溢出也不收缩。
-
flex: 1只负责分配“剩余空间”，但没min-width: 0，剩余空间就永远算不出来 - 只加
min-width: 0不加flex: 1→ 输入框不占满可用空间 - 只加
flex: 1不加min-width: 0→ 输入框卡在 120px 左右，按钮被挤出或换行 - 某些 Android WebView 会把
border和padding算进“内容宽”，进一步压缩可用空间
必须写的三行 CSS（缺一不可）
以下组合在 iOS Safari 16.4+、Chrome 105+、主流 Android WebView 中实测稳定：
- 父容器：
display: flex+width: 100%（不能只靠display: flex，否则基准丢失） - 输入框：
flex: 1+min-width: 0+box-sizing: border-box - 按钮：不写任何宽度相关属性（禁用
width、flex-basis、min-width），只用white-space: nowrap防文字换行
示例结构：
.search-bar { display: flex; width: 100%; }
.search-bar input { flex: 1; min-width: 0; box-sizing: border-box; }
.search-bar button { white-space: nowrap; }
移动端键盘弹出时搜索框突然变窄或消失
这不是 CSS 错误，是视口高度突变导致 flex 容器失去计算依据。iOS 键盘弹起后，100vh 失效，如果父容器依赖 min-height: 100vh，flex: 1 就没空间可分。
- 优先用
min-height: 100dvh，降级 fallback 为min-height: 100vh - 避免在
:focus里改padding或border—— 这些触发重排，加剧跳动 - 确保搜索栏在可滚动容器内，且该容器有明确高度约束（如
max-height: 60vh）
响应式断点别删 flex，要切方向
小屏下想让按钮落到输入框下方？别删 display: flex 或改 display: block，那会破坏语义和焦点流。正确做法是：
- 媒体查询里改
flex-direction: column - 输入框加
width: 100%（此时安全，已脱离主轴分配） - 按钮加
align-self: flex-start或center控制对齐
漏掉 min-width: 0 是最常被忽略的点——哪怕其他全对，小屏下仍大概率横向溢出或按钮错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
