CSS vw and 100% height in Safari

Question

It is very difficult to format a good title for a question because it cannot be explained in just a few words.

An element that is 100% tall and a parent with a fixed height of vw(viewport width) is actually not 100% tall in Safari (Mac Mavericks, not sure about Windows). This is 0.

I prepared a pen with an example to demonstrate my problem. With Chrome, the inner element has the correct height of 100%. With Safari (v7.0.2 (9537.74.9)), the inner element has a height of 0.

Edit: The same error occurs on iPhone with iOS 7.1

Answer 1

vh vw Safari 7. , height: inherit #child:

#parent {
  width:100%;
  height:50vw;
  background: red;
}

#child {
  width: 100%;
  height: inherit;
  background: lime;
}

Safari 8 , / .