CODEWITHSUNDEEP
htmlcss
Jacob L
Jacob L

Reputation: 153

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

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 (i.e. 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 (i.e. right-panel) to change in height to contain all its contents. Can anyone confirm this?

Any help is appreciated!

Upvotes: 0

Views: 1744

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42354

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.

Upvotes: 1

Related Questions