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

I realize this answer comes incredibly late to the party but I was trying to solve this exact same thing today and this question is the first result in Google. I ended up solving it with the below code so hopefully that will help someone out in the future.

First, add an extra inner div:

  

    Max-height
  

And set the padding on that while hiding the overflow on the outer div:

.control {
    background: red;
    width: 80%;
    margin: 0 auto 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.control-max-height {
    max-height: 120px;
    overflow: hidden;
}

.control-max-height-inner {
    padding-bottom: 20%;
}

This obviously assumes you're fine with hiding part of the inner element when it overflows. In my case that wasn't a problem because the inner element is just an empty link element to make the whole thing clickable and the outer element just has a centered background image and a border set.

See fiddle: http://jsfiddle.net/UxuEB/7/