Max-height on border-boxed div with padding is not set
css
Solution
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
Problem
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%; margin: 0 auto 10px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-bottom: 20%; } ``` Now we would like to be able to set a maximum height to this div. Because the height of the div is determined by the padding on the div we would need the div to be border-boxed. So far so good. When trying to use a min-height on the div, this works. The max-height on this div however does not work for some reason. ``` .div { max-height: 60px; } ``` I created a fiddle to show you what i mean: http://jsfiddle.net/UxuEB/3/. Tested this on Chrome, FF and IE. Can somebody tell me what I'm doing wrong or why this doesn't work as expected?