max-height ignored when percentage padding defines element height

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.

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).