flex-grow:1 对 <input> 无效是因为它默认为 inline 元素，不参与 Flex 布局；必须将其置于 display: flex 的父容器中，并设 min-width: 0 才能生效。
flex-grow:1 为什么对 <input> 没反应
因为 <input> 默认是 display: inline（更准确说是 inline-box），它不参与 Flex 布局的主轴尺寸分配。直接给 <input> 加 flex-grow: 1 是无效的。
必须先让它变成 Flex 容器的“弹性子项”：显式设置 display: block 或 display: inline-flex 都不行，正确做法是包裹一层容器，或直接改 display 为 flex 的兼容值：
-
display: inline-flex不行 —— 它会让输入框自身变成 flex 容器，不是子项 -
display: block+flex-grow: 1也不行 ——flex-grow只在 flex 容器中生效 - 正确解法：把
<input>放进一个display: flex的父容器里，再给<input>设flex-grow: 1
最简可行结构：父容器必须设 display: flex
常见错误是只给输入框加样式，忘了父级上下文。Flex 属性不会向上冒泡，flex-grow 的作用对象永远是直接父容器为 display: flex 或 display: inline-flex 的元素。
典型结构如下：
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex; gap: 8px;"> <button>搜索</button> <input type="text" style="flex-grow: 1; min-width: 0;" /> </div>
-
min-width: 0很关键 —— 否则某些浏览器（如 Safari）下输入框会拒绝收缩，撑破容器 -
gap替代margin更安全，避免 margin 折叠或干扰 flex 分配 - 不要用
width: 100%混合flex-grow，两者逻辑冲突
输入框内容过长时溢出怎么办
flex-grow: 1 只管空间分配，不管内容渲染。当用户输入超长文本，又没设 overflow 或 white-space，文字会撑宽输入框甚至换行（如果设了 height 且内容超出）。
- 加
overflow: hidden+text-overflow: ellipsis？不行 ——<input>不支持text-overflow - 正确控制方式：
white-space: nowrap+overflow: hidden+text-overflow: clip（但实际仍可能显示省略号，取决于浏览器） - 更稳方案：不依赖视觉截断，而是用
input事件监听 +el.scrollLeft = el.scrollWidth保持光标始终可见
IE11 兼容性陷阱：flex-grow 在 <input> 上表现异常
IE11 对表单控件的 flex 支持极差。即使套了 flex 容器，<input> 也可能无视 flex-grow、固定为默认宽度，或在缩放时错位。
- 别信 autoprefixer 的“自动补全”，IE11 的
-ms-flex-positive对<input>基本无效 - 降级方案：用
width: calc(100% - 64px)（减去按钮宽度），配合box-sizing: border-box - 若必须用 flex，可检测
document.documentMode，对 IE11 切换 class 启用 width 计算方案
真正麻烦的不是写法，而是输入框这种“半原生、半样式”的元素，在 flex 布局里永远比 <div> 多一层不可见的盒模型约束。每次调不对，先查父容器 display，再查 min-width，最后看是不是掉进了 IE 的坑里。
