flex-grow: 1 对 input 无效是因为 input 默认为 inline-block（替换元素），不参与 Flex 主轴计算；必须将其置于 display: flex 父容器中，设 min-width: 0 释放收缩权限，且确保其为直接子项。
为什么 flex-grow: 1 对 input 没反应
因为 input 默认是 display: inline-block（更准确说是 replaced element），它不自动参与父容器的 Flex 主轴计算。flex-grow 只对 Flex 容器的**直接子项**生效，且该子项必须处于弹性上下文中——光写 input { flex-grow: 1; } 完全无效，浏览器直接忽略。
- 必须确保父容器设了
display: flex，且input和button是它的直接子元素 -
input不能靠自己设display: block或inline-flex“激活” flex 属性 - 别混用
width: 100%和flex-grow: 1：前者强制占满，后者按剩余空间分配，逻辑冲突
输入框填不满、按钮被压扁的真正原因
不是 Flex 写错了，而是浏览器给 input 和 button 加了隐式约束：input 默认 min-width: auto（Chrome 下约 120px），button 默认 min-width: min-content，两者都会劫持 flex-grow 的分配权。
-
input必须加min-width: 0才真正释放收缩权限——这是最常漏掉的一行 -
button要显式设min-width: 0（iOS Safari 需用min-width: 1px绕过内部保护） - 按钮文字多时换行？加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 别给按钮设
width、flex-basis或display: flex，这些会覆盖auto宽度本意
移动端键盘弹出后布局崩塌怎么办
flex-grow 是静态分配策略，只响应容器宽度变化，不感知视口高度突变。iOS 键盘弹起时，vh 失效、父容器高度坍缩，flex-grow 就没空间可分了。
- 确保
<head>有<meta name="viewport" content="width=device-width, initial-scale=1"> - 避免在
:focus里改padding、border或width，触发重排加剧跳动 -
input焦点态推荐用outline: none+box-shadow，并始终用box-sizing: border-box - 保底控制：加
min-width: 120px防小屏下文字不可见，max-width: 500px防大屏拉太宽
Flex vs Grid 实现搜索框的关键取舍
Grid 在整体布局中很香，但单就搜索框而言，Flex 更轻量、兼容性更好、行为更可预测——尤其在需要子项动态收缩时。
立即学习“前端免费学习笔记（深入）”；
- 用 Grid 时，
grid-template-columns: 1fr auto可行，但必须补input { min-width: 0; } - Grid 下按钮列用
auto，要检查它内部是否用了width: 100%或display: flex，这些会破坏auto行为 - 小屏换行别硬靠
grid-auto-flow，稳妥做法是媒体查询里切回flex-direction: column，input设width: 100%（此时安全） - Flex 的
align-items: stretch（默认值）能天然拉齐input和button高度，Grid 里得手动对齐
min-width: 0 这一行 CSS 常被当成“装饰”忽略，但它才是 flex-grow 能否生效的开关。一旦漏掉，再复杂的 flex 规则都只是摆设。 
