Relative gasket and vh units - error or misunderstanding of specification?

Question

Demo

Sometimes I create a square (or any rectangle, really) that will respect its ratio of any size, using a method similar to this method .

What I want:

• to prevent a square extending outside the viewing area on devices with low height, i.e. a mobile phone in landscape orientation.

Proposed solution

• limit the width of the square to a percentage of the height of the viewport using max-width: 90vh
• attitude is expected

CSS

  .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 */ 

HTML

  <div class="square mw"> <div class="square-inner"></div> </div> 

What is going to happen

• in viewports with a low height, the square should be a maximum width of 90% of the viewing height.

What is actually going on:

• when the height of the viewport is less than the width of the square:
  • Width is limited by vh Height
  • calculated by the width of the square, if it was not limited to vh
  • we get a vertically long rectangle

The specification states that the relative value is calculated from the "containing block", which for me seems to be the current width of the container.

browser behavior:

• Chrome 29.0.1547.65: as described
• Firefox 23.01: as described
• Opera: does not respect vh at all. Not tested with Opera 16 +

Am I interpreting the specification incorrectly or is this a possible error in the implementation by browsers?

Answer 1

The problem is using both lengths in% and vh.

Try the following:

Working example

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: sans-serif; font-weight: 100; } .neat { width: 50%; max-width: 600px; min-width: 320px; margin: 0 auto; } .col { float: left; padding: 2rem; width: 90vh; /*** Important bit changed width:50%; to width:90vh; ***/ max-width: 50%; /*** Important bit added max-width:50%; ***/ } .square { position: relative; height: 0; padding-bottom: 100%; overflow: hidden; } .square-inner { position: absolute; background-color: #333333; color: white; top: 0; bottom: 0; left: 0; right: 0; padding: 1.5rem; } .mw { max-width: 90vh; } 

Answer 2

I don't think Opera supports vh, and there are known issues. I am wondering if this error affects what you see: http://code.google.com/p/chromium/issues/detail?id=124331 .