必须显式为 input、textarea、select、button 设置 box-sizing: border-box，并在 flex 容器中补充 min-width: 0，否则 width: 100% 仍会因默认 content-box 计算和浏览器兼容性导致溢出、换行或截断。
直接写 box-sizing: border-box 到 input、textarea、select 上，才能真正修复表单宽度计算错误；只靠全局 * 重置或只改父容器，90% 的场景仍会溢出、换行或右侧被切。
为什么表单控件 width: 100% 总是不准
浏览器对表单控件（尤其是 input、textarea）有默认 padding 和 border，且在 Safari、旧版 Edge 等引擎中解析不稳定。你写 width: 100%，它按 content-box 算：内容区占满，再额外加 padding 和 border —— 实际宽度 = 100% + 左右内边距 + 左右边框。哪怕只有 2px 边框，缩放后四舍五入就可能超 100.03%，触发横向滚动条或错位。
常见表现：
-
input在小屏下右侧被切掉，DevTools 里看到水平滚动条 - Flex 容器中
input和button并排，按钮被挤到下一行 - 卡片内
textarea宽度超出父容器边界，但 computed width 显示 100%
必须显式覆盖所有表单元素，不能只靠 * 选择器
* 规则虽能兜住普通标签，但表单控件常被 UI 库（如 Element Plus 的 .el-input__inner、Ant Design 的 .ant-input）用更高权重样式覆盖，或被 Shadow DOM / CSS-in-JS 隔离。更关键的是：某些浏览器（如 Safari 13.1 之前）对 input 和 textarea 的 box-sizing 支持不一致，即使全局写了也回退。
实操建议：
- 把这条规则放在项目主 CSS 入口最顶部：
input, textarea, select, button { box-sizing: border-box; } - 若用了组件库，查其渲染后的实际类名（如
.el-input__inner），单独覆盖：.el-input__inner, .ant-input, .form-control { box-sizing: border-box; } - 避免只写
html, body { box-sizing: border-box; }—— 它不继承，对子元素完全无效
表单在 Flex 容器中还要加 min-width: 0
box-sizing: border-box 解决了宽度假计算，但没解除浏览器对表单控件的收缩限制。在 display: flex 容器中，input 默认 min-width: auto，会优先保内容完整（比如长 URL 或连续无空格字符串），宁可撑破容器也不压缩。
必须配合以下任一写法：
input, textarea, select { min-width: 0; }- 若用
flex: 1，建议写成flex: 1 1 0，明确flex-basis为 0 - iOS Safari 下
button有更强的min-width保护，实测min-width: 1px比0更可靠
验证是否真正生效，别信“写了就算”
改完不检查等于白改。打开 DevTools，选中目标表单元素，看「Computed」面板里 box-sizing 的最终值：
- 如果显示
content-box或被划掉，说明被更高优先级规则覆盖 - 如果显示
border-box但仍有溢出，立刻检查min-width和父容器是否形成 BFC（比如display: flow-root） - 动态插入的表单元素（如 JS 创建的
input）也要被这套规则覆盖——确保规则在 HTML 解析早期就加载
最容易被忽略的是：表单控件的伪元素（如 input[type="search"] 内部的清除按钮）、第三方组件的 Shadow DOM 内部节点、以及 Safari 对 line-height 和 padding 的隐式拉高——这些点漏一个，宽度就可能悄悄偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
