flex:1导致搜索框与按钮不等宽，是因为flex:1等价于flex:1 1 0%，需父容器display:flex且子项无min-width干扰；button默认min-width:min-content会破坏等分，须设min-width:0（iOS Safari改用1px），并配合white-space:nowrap等约束内容。
为什么搜索框 + 按钮组合用 flex: 1 会不等宽
常见现象是：输入框文字多时变宽，搜索按钮被压窄，甚至换行或溢出。这不是 Flex 失效，而是 flex: 1 默认等价于 flex: 1 1 0% —— 它让元素从“内容宽度为 0%”开始分配剩余空间，但前提是父容器已设 display: flex，且子项没被 white-space: nowrap、min-width: auto（尤其是 button 元素的浏览器默认行为）或固定 width 干扰。
搜索框和按钮必须共用同一 flex 容器
不能把 input 和 button 分开包裹在不同块级元素里再 flex，否则它们不在同一主轴上下文中，flex: 1 无法协同分配。正确结构是：
<div class="search-group"> <input type="text" placeholder="搜索..."> <button>搜索</button> </div>
对应样式必须包含：
.search-group { display: flex; }-
.search-group input, .search-group button { flex: 1 1 0; }（显式写全更稳） -
.search-group input { min-width: 0; }（input通常没问题，但加了更保险） -
.search-group button { min-width: 0; }（关键！Chrome/Safari 对button有隐式min-width: min-content）
按钮文字过长导致换行或撑宽怎么办
搜索按钮若含图标+文字（如 “? 搜索”），默认可能换行，破坏等宽。此时不能只靠 flex，要约束内容渲染：
立即学习“前端免费学习笔记（深入）”；
- 给
button加white-space: nowrap防止文字折行 - 加
overflow: hidden; text-overflow: ellipsis;控制溢出（需同时有min-width: 0） - 避免在
button内套span再设text-align——text-align在flex-basis: 0下失效，改用display: flex; justify-content: center; align-items: center; - 若用 SVG 图标，别依赖
vertical-align，统一用 Flex 居中
iOS Safari 下按钮突然变窄的临时修复
iOS 15+ Safari 在 viewport 缩放或动态宽度计算时，会悄悄重设 button 的 min-width，导致 flex: 1 分配异常。现象是：PC 正常，Safari 上按钮缩成一条线。
绕过方式不是加 min-width: 120px（会破坏等分），而是：
- 把
min-width: 0改为min-width: 1px（仅对button） - 保留
flex: 1 1 0不变 - 这个 1px 足以绕过 Safari 的最小宽度保护逻辑，又不会影响视觉等宽
真正容易被忽略的是：flex-basis 的值是否被内容劫持，而不是 flex-grow 本身——调了半天放大系数，问题却出在第三参数没锁死。
