flex-grow在工具栏中不生效，根本原因是父容器未设display: flex或子元素被width/min-width/flex-shrink等样式锁死伸缩能力；必须确保.toolbar设display: flex、input加min-width: 0和flex-grow: 1、button设flex-shrink: 0，并统一box-sizing: border-box。
Flex-grow 为什么在工具栏里不生效？
多数时候不是 flex-grow 写错了，而是父容器没设成 Flex 布局，或者子元素被其他样式（比如 width、min-width、flex-shrink: 0）锁死了伸缩能力。工具栏常见结构是 <div class="toolbar">
<input type="search"><button>搜索</button>
</div>，如果只给 input 设 flex-grow: 1，但 .toolbar 没加 display: flex，它就完全没反应。
- 必须确保工具栏容器有
display: flex，且方向为row（默认值） -
input元素默认有min-width: 0（现代浏览器），但老版本 Chrome 或某些重置样式会强制设min-width: auto，导致flex-grow失效；显式加min-width: 0更稳妥 - 按钮等兄弟元素若没设
flex-shrink: 0，可能被压缩，反而挤占搜索框空间
搜索框自动填充的最小可行 CSS
不需要复杂嵌套，三行关键样式就能让搜索框撑满剩余空间：
.toolbar {
display: flex;
align-items: center;
}
.toolbar input[type="search"] {
flex-grow: 1;
min-width: 0;
}
.toolbar button {
flex-shrink: 0;
}
注意：min-width: 0 是关键——它允许输入框在 flex 容器中真正“收缩到零”，从而把增长空间让给 flex-grow。没有这句，某些浏览器（尤其是 Safari 15–16）下输入框会固守内部最小宽度，填不满。
和 width: 100% 的区别在哪？
width: 100% 是相对父容器宽度计算，而工具栏里父容器宽度常不确定（比如响应式布局或浮动布局），容易溢出或撑不开；flex-grow 是按剩余可用空间动态分配，天然适配各种宽度变化。更实际的问题是：width: 100% 会让搜索框和按钮在同一行时直接换行，除非手动用 float 或 inline-block，反而增加复杂度。
- 当工具栏里还有图标、下拉菜单等其他元素时，
flex-grow能自动平衡所有兄弟节点的尺寸分配 -
width: 100%在 flex 容器中会被忽略（flex item 的width不影响主轴布局） - 如果需要限制最大宽度（比如不超过 400px），用
max-width配合flex-grow，而不是靠width
IE11 兼容性怎么处理？
IE11 对 flex-grow 支持不完整，尤其对 input 这类替换元素（replaced element）渲染异常。最简单有效的降级方案是用老式 table 布局模拟：
.toolbar {
display: table;
width: 100%;
}
.toolbar input[type="search"] {
display: table-cell;
width: 100%;
}
.toolbar button {
display: table-cell;
width: 1%;
white-space: nowrap;
}
这个写法在 IE11 和现代浏览器都可靠，且无需额外 polyfill。不过要注意：如果工具栏本身是响应式弹性布局的一部分，强行套 table 可能破坏整体流式行为，此时建议直接放弃 IE11 支持，或用 @supports (display: flex) 包裹 flex 方案。
真正麻烦的不是语法，而是输入框的 padding 和 border 会参与盒模型计算，导致 flex-grow 后的实际宽度不准——记得统一用 box-sizing: border-box，否则加个 padding: 8px 就可能让搜索框撑出容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
