按钮应设 flex-shrink: 0 且显式定义 width 或 min-width（如 44px），输入框设 flex-grow: 1 和 min-width: 0，父容器需 display: flex 且水平主轴；小屏时切 column 布局并调整对齐。
给按钮加 flex-shrink: 0，不是 flex: 1
直接给按钮写 flex: 1 是常见错误——它等价于 flex: 1 1 0，第二个 1 表示 flex-shrink: 1，浏览器会压缩按钮来适应窄容器，导致按钮变窄、文字被截断甚至换行。
真正要的是「固定宽度、不参与收缩」：
- 按钮本身设 flex-shrink: 0
- 输入框设 flex-grow: 1（只让它伸展）
- 父容器必须是 display: flex 且主轴为水平方向
- 别给按钮设 width: 100% 或 flex: 1，这两者都会破坏固定宽度意图
按钮宽度怎么算才稳？别靠内容撑开
用 flex: 0 0 auto 看似合理，但它只是「不缩不伸 + 按内容定宽」，两个按钮文字长度不同（比如“搜” vs “高级搜索”），宽度就天然不一致。
更可控的做法：
- 显式设 width: 44px 或 min-width: 44px（适配移动端点击热区）
- 配合 flex-shrink: 0 防止被压扁
- 如果按钮含图标，用 padding 控制内边距，而非依赖文字宽度
- iOS Safari 下建议补一句 min-width: 1px，绕过其对 min-width: 0 的特殊处理
为什么输入框加了 flex-grow: 1 还不撑满？
最常卡在这三处：
- 父容器没设 display: flex，或设成了 flex-direction: column
- 输入框默认有 min-width: auto，必须显式覆盖为 min-width: 0
- 按钮没加 flex-shrink: 0，它和输入框一起被压缩，剩余空间被“分走”了
最小可用结构示例：
<div style="display: flex; gap: 8px;"><br> <input type="search" style="flex-grow: 1; min-width: 0;"><br> <button style="flex-shrink: 0; width: 44px;">?</button><br></div>
移动端小屏下按钮换行或挤压，光靠 flex-grow 不够
flex-grow 只管“伸”，不管“缩”。小屏时输入框可能被压到看不见文字，或按钮被挤出视口。
立即学习“前端免费学习笔记（深入）”；
必须配合：
- 输入框加 min-width: 120px（至少显示“搜索…”提示）
- 小屏（如 max-width: 480px）时，父容器切为 flex-direction: column，让按钮换行到底部
- 换行后按钮别用 width: 100%，改用 align-self: flex-start 避免撑宽整个容器
- iOS Safari 对 input[type="search"] 有额外圆角和清除按钮，必要时加 appearance: none 统一
真正难的不是让按钮“看起来固定”，而是它在缩放、输入法弹出、暗色模式切换、老浏览器渲染时都保持稳定——这些边界情况里，flex-shrink: 0 和 min-width 的组合才是锚点，不是 flex 布局本身。
