In a parent element, I have two child elements:
<div id="registration">
<div id="left-panel"></div>
<div id="right-panel"></div>
</div>
The styling is as follows:
#registration{
@include l {
flex-direction: column;
}
#left-panel, #right-panel{
width: 50%;
min-height: 100vh;
@include l {
width: 100%;
}
}
To simplify, imagine that there is no content in left-panel and there is content in right-panel (not shown)
I've made the design responsive so that when the width exceeds l (1025px), the two panels are displayed side by side. However, when the width is below l, the panels are stacked on top of each other.
When they stack, I noticed that the height of one panel, say left-panel, remains the same while the other increases to accommodate its contents. Is this due to setting the height to min-height: 100vh? Changing it to 'height: 100vh' causes content overflow.
It seems like using min-height prompts the parent element (i.e., right-panel) to adjust its height based on the content within. Can someone confirm this?
Any assistance would be greatly appreciated!