My issue lies within a flex column container containing two elements with the respective classes of .one and .two nested inside:
.container {
display: flex;
flex-direction: column;
}
.one {
height: 50vh;
background: blue;
}
.two {
height: 50px;
background: red;
}<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>The challenge arises when the content in the .one element exceeds the assigned 50vh height, causing overlap with the .two class - which serves as a loading indicator. The goal is to dynamically increase the height of the .one element if its contents exceed the designated height and prevent it from overlapping with the .two class. Any suggestions or solutions?