CODEWITHSUNDEEP
cssinternet-explorersafariflexbox
Tino
Tino

Reputation: 31

Flexbox max-height in IE and Safari

I'm trying to get a scrolling container between two static ones via flexbox. The container wrapping these three divs has to have a maximum height of 90vh. The code works fine in Chrome or Firefox but does not in IE or Safari. I already tested some common flexbox-bug workarounds but none of them worked.

Example code:

.outer {
    max-height: 90vh;
    width: 400px;
    display: flex;
    flex-direction: column;
}

.body {
    flex: 1 1 auto;
    overflow: auto;
}

<div class="outer">
    <div class="header">header</div>
    <div class="body">a lot of content</div>
    <div class="footer">footer</div>
</div>

See https://jsfiddle.net/rqz2g3kz/

Thanks in advance!

Upvotes: 0

Views: 1931

Answers (1)

Tino
Tino

Reputation: 31

Thanks to @LGSon, I found the solution.

Adding a wrapping container with the opposite flex direction around the misbehaving container helps.

So the resulting code for the example would be this:

<div class="outer-wrapper">
    <div class="outer">
        <div class="head">Head</div>
        <div class="body">a lot of content</div>
        <div class="footer">footer</div>
     </div>
</div>

.outer-wrapper {
  display: flex;
  flex-direction: row;
}

.outer {
    max-height: 90vh;
    width: 400px;
    display: flex;
    flex-direction: column;
}

.body {
    flex: 1 1 auto;
    overflow: auto;
}

Upvotes: 3

Related Questions