8

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.

Alex
  • 1,051
  • 1
  • 12
  • 26

1 Answers1

6

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?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415