How does 'min-height: 100vh' work when there are child elements that stack when width is small?

Question

I have two child elements inside a parent element:

 <div id="registration">
     <div id="left-panel"></div>
     <div id="right-panel"></div>
 </div>

Styling:

#registration{

@include l {
    flex-direction: column;
}

#left-panel, #right-panel{
    width: 50%;
    min-height: 100vh;

    @include l {
         width: 100%;
    }
}

For simplicity, let's assume that there is no content in left-panel and there is content in right-panel (not shown)

I have made it responsive such that when the width is > l (ie 1025px), the two panels are side by side. When the width is < l, however, the panels will stack on top of each other.

I noticed that when they stack, the height of one, let's say left-panel, remains the same whereas the other one will increase to ensure that the contents don't 'spill out' of the element. Is this because I've set the height to min-height: 100vh? I ask because if I change 'min-height: 100vh' instead to 'height: 100vh', the content spills out.

So, it seems like min-height causes the parent element (ie right-panel) to change in height to contain all its contents. Can anyone confirm this?

Any help is appreciated!

Answer 1

There's nothing special about either flex or l in this regard.

min-height just sets the minimum height for the element - it's still allowed to expand in height of the content would exceed the height of the element, but never shrinks below the specified value:

The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height .

Conversely, height is a fixed height where the element is not allowed to expand, and content will simply get cut off if there is more content than the element can accommodate:

The height CSS property specifies the height of an element. By default, the property defines the height of the content area.

If no height is specified, the default height: auto is used, which gives the element a flexible height based on the height of the content. The element will only be as high as is needed to accommodate the content, and will indefinitely expand to contain it.