input 默认 display: inline-block，非 flex 容器直系子元素时 flex-grow 无效；须设父容器 display: flex，input 与图标同级，且 input 加 min-width: 0、图标加 flex-shrink: 0 和 align-items: center。
为什么直接给 input 加 flex-grow: 1 没反应
因为 input 默认是 display: inline-block（更准确说是 inline-box），它本身不是 Flex 容器的子项，不参与 Flex 主轴计算。你写 flex-grow: 1 到 input 上，浏览器直接忽略——它压根没进 Flex 布局上下文。
必须让 input 成为某个 display: flex 父容器的**直系子元素**，再设 flex-grow 才有效。常见错误结构是把 input 和图标分别包在不同 div 里，导致它们不在同一 Flex 轴线上。
- 正确结构：父容器设
display: flex，input和图标容器（如<span></span>或<i></i>）都是它的直接子元素 -
input必须加min-width: 0，否则某些浏览器（尤其是 Chrome）会按内容撑开，破坏flex-grow分配逻辑 - 图标容器必须加
flex-shrink: 0，否则默认flex-shrink: 1会让它被压缩到看不见
如何让图标和 input 在同一行对齐不换行
错位、图标下沉、甚至换行，90% 是因为没处理好交叉轴对齐和收缩行为。Flex 默认按基线（align-items: baseline）对齐，而 input 的 baseline 和 svg 或 i 图标天然不一致。
- 父容器必须显式设
align-items: center，这是对齐前提 - 图标容器不能设
width或height固定值（尤其用px），优先用em单位，比如width: 1.2em; height: 1.2em，这样随input的font-size自适应 - 如果图标是
<svg></svg>，确保它没内联width/height，否则会覆盖 CSS 的flex-shrink行为 - 别给图标加
vertical-align，那是 inline 场景的老办法，在 Flex 里无效且干扰
flex-grow 分配比例时，图标为啥总被挤出或变窄
根本原因不是 flex-grow 本身有问题，而是 flex-shrink 和 flex-basis 的默认值在“背刺”你。比如写 flex: 1，它等价于 flex: 1 1 0% —— 第二个 1 就是 flex-shrink: 1，图标容器一旦没显式禁用收缩，就会被压扁。
立即学习“前端免费学习笔记（深入）”；
- 图标容器必须写死
flex-shrink: 0，推荐完整写法：flex: 0 0 auto或flex: 0 0 24px（若需固定尺寸） -
input推荐用flex: 1 1 0，即flex-grow: 1、flex-shrink: 1、flex-basis: 0，从零开始均分剩余空间 - 避免混用
width和flex：比如给input设了width: 200px又加flex-grow: 1，浏览器可能忽略其中一个 - IE11 下
flex: 1对input渲染异常，必须拆开写：flex-grow: 1; flex-shrink: 0; flex-basis: 0;并额外加min-width: 0
点击图标无法聚焦到 input 怎么办
这不是样式问题，是语义缺失。用户点图标没反应，体验直接断层。靠 JS 绑定 click 是下策，原生方案更稳、可访问性更好。
- 用
<label></label>包裹图标，并通过for属性关联input的id，例如：<label for="search"><svg></svg></label>+<input id="search"> - 如果图标是
<svg></svg>，加上role="button"和tabindex="0"，否则键盘用户无法聚焦 - 千万别加
pointer-events: none到图标上——新手常以为这是“防遮挡”，实则直接废掉所有点击交互 - 测试时用键盘 Tab 切换焦点，看是否能从图标跳到输入框；用屏幕阅读器读取，确认 label 关联生效
flex-basis 的实际计算值是否被内容劫持，而不是 flex-grow 本身写错了。打开开发者工具，看每个元素的 “Flex base size” 和 “Used width”，比对着代码调，往往问题就出在那一行没写的 min-width: 0 或多写的 width 上。 
