因为input默认是inline-box，不参与Flex主轴计算；flex-grow仅对Flex容器的直接子项生效，须将其置于display:flex父容器中并设min-width:0才有效。
为什么直接给 input 加 flex-grow: 1 没反应
因为 input 默认是 display: inline（更准确说是 inline-box），它不参与父容器的 Flex 主轴计算。flex-grow 只对「Flex 容器的直接子项」生效，而子项必须是块级或弹性上下文中的合法子元素。
常见错误写法：input { flex-grow: 1; } —— 即使父容器是 flex，这行样式也完全无效，浏览器直接忽略。
- 必须把
input放进一个display: flex的父容器里（比如<div class="search-group">） <li>不能只靠 <code>input自身设display: block或inline-flex来“激活” flex 属性 - 别用
width: 100%混合flex-grow，它们逻辑冲突：前者强制占满，后者按剩余空间分配 -
flex-grow: 1只声明“增长能力”，不碰flex-shrink和flex-basis，安全可控 -
flex: 1是简写，等价于flex: 1 1 0%—— 关键在第二个参数flex-shrink: 1，会让按钮也被压缩（尤其是 Safari/Chrome 对button默认min-width: min-content） - 真正推荐写法：
input { flex-grow: 1; flex-shrink: 0; flex-basis: 0; min-width: 0; } - 按钮则显式设
flex-shrink: 0，再加white-space: nowrap防文字折行 -
button在 Chrome/Safari 中默认有min-width: min-content，导致它拒绝收缩，反而把input挤出视口 - 解决方法：给按钮加
min-width: 0（iOS Safari 需改用min-width: 1px，这是唯一绕过其内部保护机制的方式） - 如果按钮含图标+文字（如 “? 搜索”），必须加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis（注意：需配合min-width: 0才生效） - 别在按钮里套
<span></span>再设text-align——flex-basis: 0下text-align失效，改用display: flex; justify-content: center; align-items: center; -
flex-grow是静态分配策略，只响应容器宽度变化，不感知内容长度、输入事件或scrollWidth - 必须配合人工边界控制：给
input加min-width: 120px（保底可见）和max-width: 480px（防宽屏留白） - 小屏下（
@media (max-width: 480px)）建议切换为flex-direction: column，按钮放下方；或用position: absolute叠在 input 右侧，释放水平空间 - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在，否则 iOS 会强制缩放，整个 Flex 布局失准
flex-grow: 1 和 flex: 1 在搜索框里有啥区别
表面效果相似，但底层行为不同，尤其影响按钮表现：
按钮被压扁、换行或 iOS 上突然变窄怎么办
根本原因不是 flex-grow 太强，而是按钮的默认尺寸策略干扰了 Flex 分配逻辑。
立即学习“前端免费学习笔记（深入）”；
移动端键盘弹出后布局错乱，flex-grow 还管用吗
基本不管用。软键盘顶起页面时，视口高度突变，父容器高度坍缩，flex-grow 不监听这类动态变化，也不会触发重排。
flex-basis 的值是否被内容劫持——调了半天 flex-grow 系数，问题却出在第三参数没锁死，比如用了 flex: 1 却没意识到它隐式带了 flex-basis: 0%，而按钮又卡着 min-content 不放。
