input 溢出的根本原因是 box-sizing: content-box 导致 width: 100% 不包含 padding 和 border，需同时设置 box-sizing: border-box 和 min-width: 0（尤其在 Flex 布局中），并全局重置盒模型及处理 100vw 与 padding 冲突。
为什么 width: 100% 的 input 还是溢出
根本不是样式写错了，而是浏览器默认用 box-sizing: content-box 计算尺寸：width: 100% 只管内容区，而 input 自带的 padding（如 Chrome 的 padding: 1px 6px）和 border（如 1px solid #ccc）会额外叠加在 100% 之外。实际宽度 = 父容器宽 + 左右 padding + 左右 border。
常见错误现象包括：input 在小屏下触发横向滚动条、与旁边按钮错行、卡片内右侧被切掉。
- 典型场景：表单字段嵌套在
display: flex容器里；或父容器有padding但没重置子元素盒模型 -
box-sizing: border-box从 IE8 起原生支持，无需前缀；IE7 及更早版本不支持，但现代项目基本可忽略
input 必须同时设 box-sizing: border-box 和 min-width: 0
在 Flex 布局中，input 默认 min-width: auto，浏览器会优先保内容完整（比如长 URL 或连续无空格字符串），宁可撑破容器也不压缩。只加 box-sizing: border-box 只解决了尺寸计算逻辑，没解除收缩限制。
必须组合生效：input { box-sizing: border-box; min-width: 0; }
立即学习“前端免费学习笔记（深入）”；
- 如果父容器是
display: flex，且希望input占满剩余空间，建议写成：flex: 1 1 0（等价于flex-basis: 0，更彻底压制初始宽度） - 别漏掉
overflow: hidden——它得加在input的父容器上（或input自身），否则裁剪逻辑不触发
全局重置比局部修补更可靠
只给 input 加样式容易漏：它的包裹层、伪元素（如 ::before）、或第三方组件内部的表单控件，可能仍是 content-box。一旦漏掉，padding/border 就悄悄外扩。
推荐在项目入口 CSS 中加一句全局重置：
*, *::before, *::after { box-sizing: border-box; }
但这还不够——仍需对 Flex 子项显式设 min-width: 0，因为 min-width: auto 是 Flex 项目的规范级默认值，不会被继承或全局覆盖。
移动端特别注意 width: 100vw + padding 的组合
很多响应式写法喜欢用 width: 100vw 做全屏容器，但它和 padding 组合时，在 iOS Safari 和部分安卓 WebView 中会直接超限：100vw 是视口宽度，不含滚动条宽度；但 padding 是额外加上的。加上 box-sizing: border-box 也救不了——因为 100vw 本身已占满，再加 padding 必然溢出。
正确做法：width: 100% + 父容器有明确 content width（比如 max-width: 100% 或外层 padding 已由 body 控制）。
顺手检查 html 和 body 是否有意外 margin 或 padding，它们在移动端常被忽略。
