根本原因是默认box-sizing: content-box使width: 100%仅含内容区，叠加input自带padding和border导致溢出；必须全局设置, ::before, *::after { box-sizing: border-box; }并为input显式添加min-width: 0。
移动端搜索框撑破父容器，根本不是它“太宽”，而是父容器没真正约束住它——width: 100%在默认盒模型下会叠加padding和border，flex-grow: 1又受min-width: auto死锁，再加上视口缩放、输入法弹出等干扰，单靠一行 CSS 几乎必崩。
为什么加了 width: 100% 还是溢出
浏览器默认box-sizing: content-box，你写的width: 100%只算内容区。input 自带padding: 4px 8px和border: 1px solid，实际宽度 = 父容器宽 + 16px + 2px。小屏下这点额外宽度就触发横向滚动条或右侧裁切。
- 必须全局设
*, *::before, *::after { box-sizing: border-box; }，只给 input 单独加无效（子元素、伪元素仍按 content-box 算） - Bootstrap 5 虽已内置该重置，但若你引入了旧版 normalize.css 或自定义 reset，可能被覆盖——进开发者工具「Computed」面板确认
box-sizing值是否为border-box -
margin不归box-sizing管，如果父容器有margin: 0 20px，得单独处理
flex-grow: 1 在移动端不生效的真正原因
就算box-sizing正确，input作为替换元素，默认min-width: auto会阻止收缩——浏览器宁可撑破容器，也不截断 URL 或长词。这不是 flex 失效，是它被“锁死”了。
- 父容器必须是
display: flex且flex-direction: row（column 下flex-grow对 width 无效） - input 必须显式加
min-width: 0，光flex-grow: 1不够 - 旁边若有按钮（如搜索图标），必须加
flex-shrink: 0，否则它会被压缩变形 - IE11 需补
flex-basis: 0，写成flex: 1 1 0更稳妥
移动端视口变化时突然溢出的隐藏陷阱
键盘弹出、横竖屏切换、系统字体放大，都会让vh/vw基准突变，而很多布局依赖width: 100%继承祖先宽度——一旦祖先没做响应式约束，input 就硬撑。
- 父 Flex 容器必须加
width: 100%或max-width: 100%，不能只靠 display: flex - 慎用
white-space: nowrap在按钮或标签上，它会让内联内容拒绝换行，间接撑开整个容器 - Safari 键盘弹出时
vh会缩水，避免用height: 100vh做搜索框高度基准 - 焦点态别用
outline，改用box-shadow；若必须加边框，初始状态就写border: 2px solid transparent，聚焦时只变色
真正麻烦的从来不是怎么让它撑满，而是撑满之后，输入法候选框浮层、暗色模式下 border contrast、系统缩放 125%、甚至 iOS Safari 的 viewport meta 缩放逻辑，全在悄悄破坏这个宽度——得一个个补漏，不是加一行flex-grow就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
