min-height 始终作用于内容区，与 box-sizing 无关；百分比高度依赖父容器有明确高度；flex 子项可能被 stretch 覆盖 min-height；table 元素不支持 min-height。
box-sizing 对 min-height 本身没影响
min-height 始终作用于内容区（content area），和 box-sizing 无关。它不会因为设了 border-box 就“自动包含 padding”或“变矮”。你看到的“撑开”，其实是总占用高度变大了，不是 min-height 被撑开——而是你在 content-box 下加了 padding/border，它们被额外算进去了。
常见错觉来源：
- 写了
min-height: 200px+padding: 20px+border: 2px，却忘了在content-box下总高 = 200 + 40 + 4 = 244px - 开发者工具里只盯着「Min-Height」字段，没看「Computed」面板中
height、padding-top、border-top-width三者之和 - 全局没重置
box-sizing，部分子元素仍走默认content-box，导致尺寸不一致
min-height: 100% 在父容器无高度时必然失效
这不是 box-sizing 的锅，而是百分比高度的计算规则：它依赖包含块（containing block）有明确高度。如果父元素是 height: auto，那它的“100%”就是 0，子元素的 min-height: 100% 自然无效。
典型失效链：
立即学习“前端免费学习笔记（深入）”；
-
html和body没设height: 100%，直接写.main { min-height: 100% } - Flex 容器没给高度，子项却写
min-height: 100% - 用
100vh但页面有滚动缩放（如 Safari 地址栏收起），导致视口高度跳变
修复建议：
- 给祖先链第一个有高度来源的元素显式设高，例如
html { height: 100%; } - 改用
min-height: 100dvh（Chrome 105+ / Safari 16.4+ 支持） - 用 Flex 替代百分比：
.parent { display: flex; flex-direction: column; }，子项设min-height: 0再叠加min-height: 200px
flex 子项的 min-height 被 stretch 拉伸覆盖
当父容器是 display: flex 且未修改 align-items（即保持默认 stretch），子项会强制拉满交叉轴高度——此时即使写了 min-height: 300px，只要父容器高度大于 300px，子项就会被拉得更高，min-height 形同虚设。
判断是否被拉伸：
- 检查父容器是否为
flex，且flex-direction是row（此时交叉轴是垂直方向） - 看子元素在「Computed」面板中的
height是否大于你写的min-height - 临时加
align-self: flex-start，若高度回落，说明正是stretch导致
修复方式：
- 子项显式设
align-self: flex-start或align-self: baseline - 父容器改用
align-items: flex-start（影响所有子项） - 保留
stretch但加min-height: 0触发 flex 最小尺寸计算逻辑，再叠min-height: 300px
table 元素不支持 min-height
<table>、<tr>、<td> 这类表格元素对 min-height 完全无视，这是规范行为，和 box-sizing 无关。浏览器会直接忽略该声明。
替代方案：
- 把
min-height移到包裹表格的外层<div>上 - 用
height替代（但注意：固定高度下内容溢出会被裁剪） - 改用
display: grid或display: flex模拟表格布局，获得完整 CSS 尺寸控制权
最容易被忽略的一点：很多 UI 组件库内部用了 table 实现（比如某些老版本的 ant-design 表格），你查了半天 box-sizing 和 min-height，其实根本没生效——先 inspect 元素类型，再决定怎么调。
