max-height ignored when percentage padding defines element height

Question

The max-height property value seems to be ignored when the inner padding is greater than the max-height value. For example, setting this class on an element causes the max-height to be ignored.

.max-height-ignored {
    height: 0; /* or auto, makes no difference */
    max-height: 40px;
    padding: 0 0 50% 50%;
}

demo here

In my situation, It would be a pain to wrap the element to prevent overflow and was just wondering if there was a reason behind this not working.

Answer 1

The min/max width/height properties never take any other box dimensions into account, neither borders nor padding. They only constrain the used values of the width and height properties respectively. Section 10 of CSS2.1 does not explicitly mention borders or padding in the prose for the min/max properties, but it does refer to the width and height properties, both of which refer to content dimensions.

If you set height: 50px, the element will still be constrained to a content height of 40px. The padding then extends from the content area.

Unfortunately, it appears box-sizing: border-box does not address this fully, at least not when the borders and/or padding are in excess of width and height.

While I can infer that this happens as a result of browsers following the spec, why the spec was written this way I cannot answer objectively. Given that padding and overflow clipping can work together, I don't think the reason for this behavior has anything to do with overflow.

Answer 2

It might be obvious, but as a work around, you might be able to limit the width of the wrapper using max-width. In my particular case, this required a max-width: 50vh (vh: percentage of viewport height).