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.
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.
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).
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.
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:
- The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
- 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'.
- 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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With