Expanding parent's height to its children's heights

Question

Is it possible to expand parents height to its children's height in CSS? Or is there any trick to handle that? Or just 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>

Additional info, the 3 children boxes are put onto each other, AND there are many-many parent div boxes under each other, so would be important to force the height of the parent div boxes.

CSS style something like that, but not working.

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;}

Thanks in advance! FF