title: Relative padding and vh units - bug or spec misunderstanding?
body: <p><strong><a href="http://codepen.io/larrybotha/pen/xstDK" rel="nofollow">DEMO</a></strong></p>
  
  <p>Sometimes I'll create a square (or any rectangle, really) that will respect its ratio at any size using a method similar to <a href="http://www.mademyday.de/css-height-equals-width-with-pure-css.html" rel="nofollow">this method</a>.</p>
  
  <p><strong>What I want:</strong></p>
  
  <ul>
  <li>to prevent the square extending outside of the viewport on devices with a small height
  i.e. mobile phone in landscape</li>
  </ul>
  
  <p><strong>Proposed solution</strong></p>
  
  <ul>
  <li>limit width of square to a percentage of viewport height using <code>max-width: 90vh</code></li>
  <li>expect ratio to be respected</li>
  </ul>
  
  <p><em>CSS</em></p>
  
  <pre><code>    .square {
        position: relative;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;
      }
  
      .square-inner {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
  
      .mw { max-width: 90vh;} /* solution, but makes things break */
  </code></pre>
  
  <p><em>HTML</em></p>
  
  <pre><code>    &lt;div class="square mw"&gt;
          &lt;div class="square-inner"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>What should happen</strong></p>
  
  <ul>
  <li>in viewports with small heights, the square should be a max width of 90% of the viewport height</li>
  </ul>
  
  <p><strong>What actually happens:</strong></p>
  
  <ul>
  <li>when <em>viewport</em> height is less than width of square:
  <ul>
  <li>width is constrained as per <code>vh</code> value</li>
  <li>height is calculated from width of square had it <em>not</em> been constrained to <code>vh</code></li>
  <li>we get a vertically long rectangle</li>
  </ul></li>
  </ul>
  
  <p><a href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="nofollow">The spec</a> says that the relative value is calculated from the 'containing block', which to me seems as though it should be the current width of the container.</p>
  
  <p><strong>Browser behaviour:</strong></p>
  
  <ul>
  <li>Chrome 29.0.1547.65: as described</li>
  <li>Firefox 23.01: as described</li>
  <li><s>Opera: does not respect vh at all</s> Not validated with Opera 16+</li>
  </ul>
  
  <p>Am I interpreting the spec incorrectly, or is this a possible bug in implementation by browser vendors?</p>