box-sizing: border-box 对 height: 100% 溢出无效，因其仅控制宽高是否包含 padding/border，不解决父容器缺高度、vh 动态失效、flex 子项未设 min-width: 0、margin 叠加或视口单位解析等根本问题。
box-sizing 本身不能解决移动端 100% 高度布局下的溢出问题——它不控制高度计算逻辑，也不修复 vh 动态失效、父容器缺高度、flex 子项溢出或 margin 叠加导致的滚动条。盲目重置为 border-box 甚至可能掩盖真实问题。
为什么 box-sizing: border-box 对 height: 100% 溢出无效
该属性只改变 width 和 height 如何包含 padding 与 border，但对以下关键溢出成因毫无作用：
-
height: 100%依赖父元素有明确高度；若html或body没设height: 100vh或height: 100dvh，百分比高度直接退化为auto - 移动端 Safari / iPad Chrome 中
100vh不随地址栏显隐更新，实际高度错位——box-sizing完全不参与视口单位解析 -
margin溢出是盒模型外层行为，box-sizing不影响margin的叠加计算 - flex 子项（如
flex: 1）内容过长时溢出，根源是缺少min-width: 0或overflow控制，和box-sizing无关
真正要改的不是 box-sizing，而是高度链与单位选择
移动端全高布局溢出，90% 出现在高度继承断裂或单位误用。必须分场景处理：
- 全屏容器（无顶部导航）：优先用
height: 100dvh，并前置height: 100vh兜底，同时确保<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> - 带固定头部的布局（如顶部 Tab）：用
calc(100dvh - 64px)替代height: 100%，避免依赖 flex 布局撑高 - flex 容器内子项溢出：给子项加
min-width: 0+overflow: hidden，而不是调box-sizing - 含
margin的 100% 尺寸元素：改用width: calc(100% - 10px)、height: calc(100% - 10px)，而非寄望于box-sizing吞掉 margin
哪些地方 box-sizing 确实有用（但非溢出主因）
它只在涉及 padding 或 border 与百分比尺寸共存时起辅助作用，例如：
- 一个
width: 100%的输入框，同时设padding: 8px和border: 1px solid—— 此时box-sizing: border-box可防止总宽超父容器 - SVG 或图片容器设了
height: 100%且含border，用border-box避免 border 加高后溢出（但 SVG 本身更常因display: inline溢出，应优先设display: block）
真正卡住移动端全高布局的，从来不是 box-sizing，而是视口单位选择、高度继承链断裂、flex 收缩行为失控，以及 iOS 对 overflow: hidden 的特殊限制。这些点漏掉任何一个，单靠 box-sizing: border-box 都会白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
