Safari height 100% element inside a max-height element

Question

I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.

You can see it here

CSS:

body, html {
    height: 100%;
    margin: 0;
}
div {
    height: 100%;
    max-height: 300px;
    width: 100px;
}
div span {
    background: #f0f;
    display: block;
    height: 100%;
}

Markup:

<div>
    <span></span>
</div>

I'm using Safari 6.0.5 on OSX 10.8.5.

It seems like [this bug](https://bugs.webkit.org/show_bug.cgi?id=26559) is responsible. Here's also an [answer](http://stackoverflow.com/a/8468131/1456376) about it. The only solution that worked for me was adding `div { position: absolute; }`, [try it here](http://jsfiddle.net/nbVXN/). — insertusernamehere, Oct 01 '13 at 15:36
@insertusernamehere Perfect. I still hate safari ;) if you put that as an answer, I'll accept it. — Chad, Oct 01 '13 at 15:39

score 24 · Accepted Answer · answered Oct 01 '13 at 16:10

24

This issue happens due to a reported bug in Webkit:

Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly

This seems to be fixed for Chrome by now, but not for Safari.

The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:

div {     
    position: absolute;
}

Demo

Try before buy

answered Oct 01 '13 at 16:10

insertusernamehere

23,204
9
87
126

@insertusernamehere, but what about case you want to build two divs one after the second? take your HTML and copy it, then put the copied div after the orginal. can you see the copy?... – user5260143 Nov 27 '16 at 09:58

score 8 · Answer 2 · answered Jun 29 '17 at 07:50

8

Similar problem appears on Safari if parent element uses flexbox properties - container won't take 100% of the height. Another solution (besides position: absolute;) would be to use vh (viewport height) units:

div {
 height: 100vh;
}

answered Jun 29 '17 at 07:50

Sergey Dubovik

155
2
12

2

I spent hours looking for this solution... worked like a charm! The absolute positioning didn't work, but setting the height on the div immediately inside of the div with `display: flex` worked! – Nate Jul 04 '19 at 05:56
1

@sergey-dubovik This was a lifesaver! Thanks! – YSFKBDY Jan 10 '20 at 16:29

Safari height 100% element inside a max-height element

2 Answers2

Linked