div中的div

Question

我希望将内部div除以外部div的高度的百分比，而不是按视口的百分比。我该怎么做呢？这里有一些虚拟的HTML和CSS：

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    height: 100px;
    width: 100px;
}

.inner {
    height: 50%;
    width: 50px;
}

在这种情况下，我希望内部div的最终高度为50px，而不是800-ish px（屏幕高度的一半）。