Neil Neil - 1 year ago 96
CSS Question

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

I have a very simple situation, where I want to set a container element to

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

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

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

Here is a fiddle showing this issue:

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

Answer Source

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;