10

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.

2
  • It seems like this bug is responsible. Here's also an answer about it. The only solution that worked for me was adding div { position: absolute; }, try it here. Oct 1, 2013 at 15:36
  • @insertusernamehere Perfect. I still hate safari ;) if you put that as an answer, I'll accept it.
    – Chad
    Oct 1, 2013 at 15:39

2 Answers 2

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

1
  • @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?... Nov 27, 2016 at 9:58
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;
}
2
  • 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 4, 2019 at 5:56
  • 1
    @sergey-dubovik This was a lifesaver! Thanks!
    – YSFKBDY
    Jan 10, 2020 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.