Max-height on border-boxed div with padding is not set

Question

We use the percentage trick on paddings to keep aspect ratio to a div when the user scales his window. Like this:

.div {
    background: red;
    width: 80%;         


        

Answer 1

The property max-height works on the height of the element and you want to use it on the height and padding-bottom.

I think you are confused by the box-sizing property that it changes the element height to the overal height including the padding top and bottom (also me). But this is not the case as you will see in the jsFiddle example.

An example:

• The element with content is 100px in height.
• The max-height is set to 50px (element is now 50px in height).
• Now we apply the padding-bottom of 100px (more then the height of the element). The padding of 100px is added to the total height of the element making it 150px.

JsFiddle example: clicky