将父母的身高扩大到孩子的身高

Question

是否有可能将父母身高扩展到孩子在CSS中的身高？或者有什么技巧可以解决这个问题吗？或者只是JavaScript？

<div class="parent">
    <div class="child child1"></div>
    <div class="child child2"></div>
    <div class="child child3"></div>
</div>

<div class="parent">
    <div class="child child1"></div>
    <div class="child child2"></div>
    <div class="child child3"></div>
</div>

附加信息，3个子框相互叠加，并且彼此之间有许多父div框，因此强制父div框的高度非常重要。

CSS样式就是这样，但不起作用。

parent  {
display: block;
overflow: hidden;
position: relative;
width: 100vw;
min-width: 100%;
min-height: 100%;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
border: none;
border: solid 6px green;}

.child {
display: block;
position: absolute;
width: 100%;
height: 100%;
min-height: 100px;
margin: 0px;
padding: 0px;
top: 0px;
bottom: 0px;
border: solid 2px red;}

.child1 {z-index: 100;}

.child2 {z-index: 200;}

.child3 {z-index: 300;}

提前致谢！ FF