flex-grow: 1 无效的根源在于父容器未设 display: flex，且需同时满足 min-width: 0、按钮设 flex-shrink: 0、视口稳定等约束条件，缺一不可。
父容器没设 display: flex，flex-grow 就是摆设
写了 flex-grow: 1 却没反应？八成是父容器压根没启用 Flex 上下文。浏览器看到 flex-grow，第一件事就是查父级有没有 display: flex；没有，直接忽略，连计算都不做。
- 确保搜索栏外层容器（比如
.toolbar或.search-container）明确写了display: flex - 别用
inline-flex—— 它会让容器本身变成内联尺寸，宽度不可靠，flex-grow算不出剩余空间 - 检查是否误设了
flex-direction: column：横向填满必须是默认的row方向
input 默认 min-width: auto 是隐形杀手
Chrome、Safari 对 input[type="search"] 默认加了 min-width: auto（约 120–130px），它会强行卡住收缩起点，导致 flex-grow: 1 拿不到“可增长”的基础 —— 因为元素根本没被允许缩到足够小。
- 必须显式写
min-width: 0，不能依赖继承或重置样式 - 哪怕用了
flex: 1，也得配min-width: 0，否则 Safari 15–16、老版 Chrome 仍会失效 - 别指望
box-sizing: border-box能解决这个，它是尺寸计算方式，不改最小宽度限制
按钮没设 flex-shrink: 0，输入框就被挤变形
按钮文字变长（如“搜”→“高级搜索”）、字体渲染差异、或小屏宽度压缩，都会让按钮主动收缩 —— 但它一缩，flex-grow 就以为“剩余空间变大了”，结果输入框反而撑得更满，甚至溢出容器。
- 给按钮加
flex-shrink: 0，再配合固定宽（如width: 44px或flex-basis: 44px） - 避免给按钮设
white-space: nowrap，它会让内联内容拒绝换行，间接撑开整个 flex 容器 - 如果按钮是图标（比如 SVG），确保其容器没设
display: inline—— 这类元素在 flex 中行为不稳定，建议包一层div并设display: flex
移动端键盘弹起后搜索框变窄，不是 flex-grow 的锅
iOS 键盘拉起时，视口高度突变，vh 失效，若父容器依赖 min-height: 100vh，高度坍缩，flex-grow 就无空间可分。这不是 CSS 属性问题，是布局基准丢失。
-
必须有<meta name="viewport" content="width=device-width, initial-scale=1"> - 搜索栏容器加
width: 100%或max-width: 100%，切断祖先宽度继承链 - 焦点态慎用
padding或border动态变化 —— 改用outline: none+box-shadow，初始状态预留透明边框（如border: 2px solid transparent）
flex-grow: 1，而是一组相互制衡的约束：父容器必须“可算”，输入框必须“可缩”，按钮必须“不可挤”，视口必须“可稳”。漏掉任何一环，它就只是一行无效 CSS。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
