flex-grow: 1 单独写在 input 上无效，必须父容器设 display: flex 且 input 显式设 min-width: 0；否则默认 min-width: auto 会阻止收缩，架空 flex 分配逻辑。
flex-grow: 1 单独写在 input 上基本没用，真正起效的前提是：父容器为 display: flex，且该 input 的 min-width 被显式设为 0。
为什么 flex-grow: 1 常常不生效
常见错误现象：搜索框卡在左侧、右侧大片空白，哪怕父容器已加 display: flex。根本原因不是 Flex 没启用，而是 input 元素默认的 min-width: auto 在阻止收缩——它会让元素至少撑开到内容宽度，直接架空 flex-grow 的空间分配逻辑。
必须显式覆盖这个行为：
-
min-width: 0是关键，不是可选项 - 避免同时设置
width（尤其固定值或100%），它会和 Flex 规则冲突，在 IE11 或嵌套场景下直接让flex-grow失效 - 如果旁边有搜索图标按钮，记得加
flex-shrink: 0，否则按钮可能被压缩变形
flex: 1 和 flex: 0 1 0 的实际区别
flex: 1 看似简洁，但它等价于 flex: 1 1 0%，其中第二个 1 表示 flex-shrink: 1。这意味着当容器空间不足时，input 会被压缩——而你通常不希望搜索框被压扁到无法输入。
更稳妥的写法是：
-
flex: 0 1 0：不放大（flex-grow: 0）、可收缩（flex-shrink: 1）、基准尺寸为0（flex-basis: 0） - 或拆开写：
flex-grow: 0; flex-shrink: 1; flex-basis: 0; - 若明确不想让它收缩，就用
flex: 0 0 0+min-width: 200px组合 -
flex-basis: 0比flex-basis: 0%更可靠，尤其在 IE11 中能绕过部分计算 bug
移动端键盘弹出导致宽度跳变
iOS/Android 键盘弹起时，视口高度变化常触发容器重排，flex-grow 可能误判剩余空间，导致 input 突然变窄或错位。
必须配合以下措施：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在，否则 iOS 会强制缩放页面，Flex 布局彻底失准 - 给父
flex容器加width: 100%或max-width: 100%，防止它继承祖先过宽的计算值 - 慎用
white-space: nowrap在按钮或图标上，它会让内联内容拒绝换行，间接撑开容器 - 统一用
box-sizing: border-box，避免padding+border叠加后超宽
真正麻烦的不是撑开，而是撑开之后的边界情况
比如暗色模式下 outline 颜色变化引发重绘、输入法候选框遮挡、折叠屏横竖切换时 ResizeObserver 触发时机不准、甚至某些安卓浏览器对 scrollWidth 的读取延迟……这些都不会在写 flex-grow: 1 时暴露。
最易被忽略的一点：min-width 必须用像素值（如 200px），不能用百分比或嵌套 calc()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
