Height vs Min-Height

HTML-CSS
1 
 .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;

Just curious about a minor point but why would anyone write
min-height:300 px
instead of height:300 px

2

height will put your element to a size of 100% of it’s container.

min-height will put the element to min 100% of the container size.

3
Definition and Usage The min-height property defines the minimum height of an element.

If the content is smaller than the minimum height, the minimum height will be applied.

If the content is larger than the minimum height, the min-height property has no effect.

Note: This prevents the value of the height property from becoming smaller than min-height.
W3schools

4

not necessarily if you have
height: 300px
as in the example I quoted - or am I wrong?

5

Thanks - this is what I didn’t get - that the min-height rule is related to the content. All clear now!

6

It does what it says.

Gives the element a minimum yet allows for the element to grow larger as needed. Just like maximum (max-) allows the element to get smaller but not larger. You will almost never used fixed width/height as you will likely just end up with an overflow.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.