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?

Support is poor in Safari - http://caniuse.com/#search=vh Check the know issue at the bottom — Paulie_D, Jun 03 '14 at 14:25
I see issues with iOS7 Safari listed, but not desktop. The bug is listed for VH units, if I change this example to VW units, it again causes the same issue. — Neil, Jun 03 '14 at 14:31
Ios is buggy for vh units. You can try viewport units buggyfill but I don't recommend it without any edit. — DifferentPseudonym, Sep 07 '14 at 08:15

Stephan Muller · Accepted Answer · 2015-06-24T11:30:47.040

18

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/

edited Jun 24 '15 at 11:30

answered Sep 11 '14 at 19:59

Stephan Muller

27,018
16
85
126

2

God I love StackOverflow! – Jimbali Apr 07 '16 at 10:17
2

I found that `height: inherit; max-height: 100%` helps with browser compatibility. – Jimbali Apr 07 '16 at 11:31

pstenstrm · Answer 2 · 2014-09-07T08:46:38.090

1

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%;
}

edited Sep 07 '14 at 08:46

answered Sep 07 '14 at 08:12

pstenstrm

6,339
5
41
62

`absolute` Doesn't work well. Doing so, creates double scroll, and layout gets blown out of proportion. – Seif Sallam Sep 07 '14 at 08:32
@misterManSam Sorry, but in my case i doesn't. I have list of items that are displayed as a grid. Setting both width, and height to 100% for inner element sets element to document % instead of parent. Here is a Gif for my current view https://dl.dropboxusercontent.com/u/616034/vw-issue.gif – Seif Sallam Sep 07 '14 at 08:36
@SeifSallam - Can't see the gif. Can you show a basic example in a fiddle? – misterManSam Sep 07 '14 at 08:42
@SeifSallam In itself it shouldn't create any scroll, I need more information to know what's going on there. Do you have any padding applied to the `.container` element? – pstenstrm Sep 07 '14 at 11:32
@pstenstrm No, but i'm using flexbox as my main outer container. The one that holds the whole grid. – Seif Sallam Sep 07 '14 at 18:12

score 1 · Answer 3 · answered Sep 08 '14 at 05:37

You can achieve this using flexbox (tested in Safari 7.0.6, iOS 7 and iOS 8.0 simulator) -

http://jsfiddle.net/clintioo/zkmnomab/

.container {
    background-color: red;
    width: 100%;
    height: 80vh;  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.inner {
    -ms-flex: 1;
    -webkit-flex: 1;
    -webkit-box-flex: 1.0;
    flex: 1;
    background-color: blue;
}

Problem is, there is an outer-container that is above the current container, that is flex and doesn't have height. Container is like cell item. Which i sets the height for each cell. Finally inner takes 100% of the space of the parent, so that i can center elements inside. — Seif Sallam, Sep 08 '14 at 08:05

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

3 Answers3

Linked