flex-grow: 1 不生效的主因是 input 的 min-width: auto 锁定最小宽度，必须设 min-width: 0 才能释放伸展空间，同时需配合 box-sizing: border-box、flex-shrink: 0（按钮）、合理视口声明才能稳定工作。
为什么 flex-grow: 1 加了也不撑满搜索框
不是 Flex 没生效，而是 input 默认的 min-width: auto（Chrome 约 120px，Safari 类似）在锁死宽度——它拒绝收缩到比内容更窄，导致 flex-grow: 1 根本分不到空间。
必须显式打破这个限制：
-
min-width: 0是硬性前提，缺一不可 - 避免同时写
width: 100%或任何固定width，它会和 flex 规则冲突，尤其在嵌套或 IE11 中直接失效 - 父容器必须是
display: flex且主轴为row（默认），flex-direction: column下flex-grow不起作用 - 同级按钮若没设
flex-shrink: 0，小屏下会被压缩，反而挤占input的伸展空间
按钮和输入框怎么对齐才不穿帮
常见错位来自边框叠加、圆角断裂或高度不一致。Flex 不自动修这些视觉细节，得手动对齐：
-
input设border-radius: 4px 0 0 4px，button设border-radius: 0 4px 4px 0 - 两者都加
box-sizing: border-box，否则 padding/border 会撑出额外宽度 - 移除默认 margin，用
gap: 0或margin-left: -1px拉齐边缘 - 按钮加
white-space: nowrap防文字换行，再配min-width: 80px保底，避免被压扁失真
小屏下换行失败的四个隐藏原因
flex-wrap: wrap 不是开关，是条件触发器——空间真不够了才会换。但很多布局“假装够”：
- 父容器没设
width或max-width，Flex 容器无限撑宽，永远不触发换行 -
input的min-width: auto拒绝收缩，导致兄弟按钮被挤出视口，而不是自己换行 - 旁边按钮用了
flex: 1或width: 100%，抢走全部空间，input失去参与换行的资格 - iOS 键盘弹出时
100vh失效，若容器依赖min-height: 100vh，高度坍缩，flex-wrap 就失去判断依据
移动端键盘弹出后布局崩塌怎么办
这不是 CSS 写错了，是视口突变导致 Flex 布局重算失准。iOS 键盘会吃掉约 300px 高度，vh 不再可信：
- 别用
min-height: 100vh作为搜索栏容器高度，改用height: auto或min-height: fit-content -
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在，否则 iOS 强制缩放会干扰 flex 计算 - 避免在
:focus里动态改padding、border或width，这些会触发重排加剧跳动 - 焦点态推荐用
outline: none+box-shadow模拟，且始终启用box-sizing: border-box
min-width: 0、flex-shrink: 0、box-sizing、视口声明这四样东西缺一不可地咬合在一起。少一个，布局就在临界尺寸下悄悄失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
