Safari: VH units applied to parent element doesn't allow 100% height in child?

Question

I have a very simple situation, where I want to set a container element to 80vh and then have the inner div to be 100% of that height. On Chrome this will render correctly, however on Safari, the inner element doesn't have 100% of the 80vh height.

.container {
    background-color: red;
    width: 100%;
    height: 80vh;
}

.inner {
    height: 100%;
    background-color: blue;
}

Here is a fiddle showing this issue: http://jsfiddle.net/neilff/24hZQ/

On Chrome the element is blue, in Safari it is red. Is there a work around for this issue without applying 80vh to the height of the .inner div?

Answer 1

This is a known bug with vh and vw in Safari. You can fix it by setting height: inherit on the inner element:

.inner {
    height: inherit;
}

http://jsfiddle.net/24hZQ/47/

Answer 2

You'll need to set position: absolute; to the .inner element.

.container {
    background-color: red;
    width: 100%;
    height: 80vh;
    position: relative;
}

.inner {
    height: 100%;
    background-color: blue;
    position: absolute;
    width: 100%;
}