Html div不继承子div的大小

我试图理解在将应用程序从一个区域移动到另一个区域时所面临的问题。我以前是在一个独立的测试应用程序中测试我的HTML，现在我对它感到满意。所以我开始把它整合到正确的地方。当我这样做时，我发现我有一个奇怪的CSS问题，因为div元素似乎不再继承子divide的维度

为了演示这个问题，我创建了一个示例，下面还提供了代码

向后看，最外层的div的样式属性为height和width（100px）硬编码，它似乎具有我所期望的计算样式

到目前为止我很高兴。我们可以看到100像素的高度和宽度

正如我所期望的那样，带有类child的div似乎也从子内容继承维度。我们看到100px的高度和宽度

到目前为止，这是正确的行为

然而，这就是我对CSS知识的不足之处。类为parent的div似乎丢失了其内容中的所有宽度和高度信息，因此用户在浏览器中看不到任何内容，因为这些div的大小实际上变为0px，并且内容被隐藏

我的问题是，为什么宽度和高度不能从父样式类的div元素的子元素继承

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <div style="height: 100px; width: 100px; background-color: black;">hello</div>
        </div>
    </div>
</div>

---

赞成和反对，但立场：绝对；在这种情况下，问题在于：

---

谢谢你的快速回复！这正是我需要的。

.grandparent {
    height: auto;
    position: absolute;
    margin: 0;
    overflow: auto;
    display: block;
    background-color: red;
}
.parent {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: block;
    background-color: green;
}
.child {
    height: auto;
    position: absolute;
    margin: 0;
    overflow: auto;
    display: block;
    background-color: blue;
}

.child {
    height: auto;
    position: relative;
    margin: 0;
    overflow: auto;
    display: block;
    background-color: blue;
}