How can I increase the height of the parent element which has relative position based on child elements height which has absolute position.
In my below example height of the .parent element is showing as 0px
PS: I do not want to use any script
Expected:
What I am getting:
.parent {
position: relative;
width: 250px;
}
.child,
.child::before,
.child::after {
box-sizing: border-box;
}
.child {
position: absolute;
}
.child:first-child::before {
content: '';
position: absolute;
bottom: 1em;
background-color: white;
width: 250px;
height: 100vh;
z-index: -1;
border-bottom: 1px solid #000000;
}
.child:last-child::before {
content: '';
position: absolute;
bottom: 0;
background-color: green;
width: 250px;
height: 100vh;
border: 1px solid #000000;
border-top-width: 0;
z-index: -2;
}<div class="parent">
<div class="child" style="top:20px;">Hello</div>
<div class="child" style="top:40px;">Some content</div>
<div class="child" style="top:60px;">Some more content</div>
</div>What it does not do, and cannot do, is set the height of the parent. And there is an assumption that the background above the parent is white (it could have any color built in of course but it's not totally generalisable - more an exercise).