I'm facing an issue where the child div (.timeline) needs to adjust its height as the parent divs (.tea-history) height increases. However, using height:inherit; didn't work as expected because the child div inherited an auto height from the parent div. When I attempted to use height:100%; it ended up taking the height of the entire page.
Does anyone have a solution for making the .timeline class increase its height along with the parent div?
.tea-history {
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 20px;
height: 800px; /*Currently i have set the height to 800 so the timeline is visible*/
width: 90%;
margin-top: 70px;
}
.tea-history .timeline {
position: absolute;
height: inherit;
width: 3px;
border-radius: 20px;
background-color: #7aaa62;
margin-top: 50px;
margin-left: 50px;
}
.tea-history .frame {
width: 80%;
display: grid;
grid-template-columns: 20px auto;
gap: 33px;
margin-top: 30px;
margin-left: 42px;
}
.tea-history .frame .timeline-dot {
display: flex;
align-items: center;
}
.tea-history .timeline-dot .outer-dot {
position: absolute;
height: 15px;
width: 15px;
border-radius: 50%;
border: #000 solid 3px;
}
.tea-history .timeline-dot .inner-dot {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #000000;
margin-top: 2px;
margin-left: 2px;
}<div class="tea-history">
<h3 class="heading">History</h3>
<div class="timeline"></div>
<div class="frame">
<div class="timeline-dot"><span class="outer-dot"><span class="inner-dot"></span></span>
</div>
<div class="content">
<h4>2035 - 2054</h4>
<p>
...
</p>
</div>
</div>
</div>