Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In CSS, does min-height always have priority over max-height in all browsers?

Tags:

css

I'm trying to establish which CSS property takes priority - min-height or max-height - and whether this is consistent across browsers.

For example, consider the following:

.class{
  min-height:600px;
  max-height: 50vh;
}

If the browser viewport was 1000px tall, the min-height (600px) would be greater than the max-height (50vh = 500px). I know it's a slight paradox, but perfectly possible and likely (coding best practices aside).

As far as I can see from testing, the min-height takes priority, even if the element ends up exceeding the max-height as a result - i.e. the element is rendered at 600px high, even though the max-height is 500px;

Is this expected standardised behaviour? Or is this something that's open to interpretation by browser vendors, and may vary between browsers or devices.

like image 630
Alex Avatar asked Jan 28 '21 12:01

Alex


People also ask

Can I use min height and max-height together?

Min height always overwrites height and max-height, so you can't just use both. You can use both, but the min-height will take precedence if it ever conflicts with max-height or height.

What is the difference between min height and height in CSS?

The difference between height and min-height is that height defines a value for the height and that's how tall the element will be. min-height says that the minimum height is some value but that the element can continue to grow past that defined height if needed (like the content inside makes it taller or whatever).

What is the difference between min height and max-height?

The max-height and min-height properties are used to set the maximum and minimum height of an element. This prevents the value of the height property from becoming larger than max-height or smaller than min-height. The value of the max-height and/or min-height property overrides height.


1 Answers

Yes min-height is always the winner according to the specification:

The following algorithm describes how the two properties influence the used value of the 'height' property:

  1. The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
  2. If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
  3. If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.

As you can see, the min-height is the last one to be proceeded. We first calculate the height without min/max. Then we introduce max-height that may change the computed value of height and at the end we do the same with min-height.

Worth to note that the same happen with min-width ref


As far as I know, nothing can override min-height/width, even the shrink feature of flexbox cannot make an element shrink past its min-height/width. Related: Why is a flex item limited to parent size?

Also related: min-width and max-width with the same value?

like image 149
Temani Afif Avatar answered Sep 29 '22 15:09

Temani Afif