Max-height is ignored when percentage filling determines the height of an element

Question

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

 .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 painful to wrap the element in order to prevent overflow, and it was just interesting if there was a reason why this did not work.

Answer 1

The min / max width / height properties never take into account any other box sizes, borders, or padding. They limit only the used values ​​of the width and height properties, respectively. Section 10 in CSS2.1 does not explicitly mention borders or additions in prose for the min / max properties, but this refers to width and height , both of which relate to the size of the content.

If you set height: 50px , the element will still be limited to a content height of 40 pixels. Then the filling extends from the content area.

Unfortunately, it seems that box-sizing: border-box does not apply to this completely, at least when the borders and / or padding do not exceed the width and height.

Although I can conclude that this is due to the fact that browsers follow the specification, why the specification was written in such a way that I can not answer objectively. Given that indentation and overflow can work together, I don't think the reason for this behavior has anything to do with overflow.

Answer 2

This may be obvious, but as a job, you can limit the width of the shell with max-width . In my particular case, this required max-width: 50vh ( vh : percentage of viewport height ).