父母和孩子都有box-sizing: border-box;。根据MDN：
<percentage>将高度定义为包含块的高度的百分比。
那么孩子的身高也应该是500px，但显然不是，它的高度是父母的内容高度的高度，而不是 父母的高度。在包括IE在内的许多浏览器上尝试过此代码后，它们的工作原理都是一样的，为什么呢？
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
<title>Test</title>
<style>
body {
background: #000;
}
.parent {
border: 50px solid blue;
padding: 20px;
width: 500px;
height: 500px;
background: green;
overflow: auto;
}
.child {
background: red;
height: 100%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
看来我误解了这个词containing block，我以为是父母，但实际上，这还有很多。
我必须深入研究W3C标准才能发现：
“包含块”的定义
有时会相对于某个矩形（称为元素的包含块）来计算元素框的位置和大小。
根元素所在的包含块是一个称为初始包含块的矩形。
对于其他元素，如果元素的位置为“相对”或“静态”，则包含的块由最近的块容器祖先框的内容边缘形成。
...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句