title: Responsive div size with proportions
body: <p>I have this setup:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="container"&gt; &lt;div class="inner"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .wrapper {
      max-width:320px;
      max-height:240px;
  }
  .container {
      position:relative;
      padding-top:56.25%;
      background:green;
  }
  .inner{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/3A32T/2/" rel="nofollow">http://jsfiddle.net/3A32T/2/</a></p>
  
  <p>If you shrink window width, div size shrinks while keeping aspect ratio which is what I want.</p>
  
  <p>However, if you shrink window height, div height doesnt shrink, you get browser scroll.</p>
  
  <p>Is there a way to achieve second conditional as well?</p>