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

Question

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.

question from:https://stackoverflow.com/questions/65937247/in-css-does-min-height-always-have-priority-over-max-height-in-all-browsers

Answer 1

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?