title: Max-height on border-boxed div with padding is not set
body: <p>We use the percentage trick on paddings to keep aspect ratio to a div when the user scales his window. Like this:</p>
  
  <pre><code>.div {
      background: red;
      width: 80%;
      margin: 0 auto 10px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding-bottom: 20%;
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>.div {
      max-height: 60px;
  }
  </code></pre>
  
  <p>I created a fiddle to show you what i mean: <a href="http://jsfiddle.net/UxuEB/3/">http://jsfiddle.net/UxuEB/3/</a>.</p>
  
  <p>Tested this on Chrome, FF and IE. Can somebody tell me what I'm doing wrong or why this doesn't work as expected?</p>