Bootstrap: Flexbox flex-column issue in Safari 10

[cquillen2003]

A flex-column container with height set to 100% does not work properly in Safari.

An item inside the flex-column container does not grow to fill the container. See JS Bin below.

System info:
Mac OS X El Capitan 10.11.6
Safari 10.0.3

https://jsbin.com/natibanuko/1/edit?html,output

[wonderment]

I don't think this is a Bootstrap issue given you're dealing with Flexbox properties in a browser.

Maybe you can try:

<div class="container-fluid" style="height:100%;">
        <div class="row" style="height:100%;">
            <div class="col" style="display:flex;">

                <div class="d-flex flex-column" style="">

                    <div style="background-color:yellow;height:100px;">
                      Fixed height item here for search, filters, etc.
                    </div>

                    <div style="background-color:lightgreen;flex:1;">
                        Item set to flex:1 to fill the column

[zavvla]

This is a bug of the engine, waiting for the iOS update...
proof: https://bugs.webkit.org/show_bug.cgi?id=137730

[mdo]

Yeah, it appears you're running into a known flex bug (though not one that appears documented in the flexbugs repo that I can tell). There's an awesome StackOverflow answer at http://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent though for why this doesn't work right now and potential fixes.

Easiest fix I found for your example was to remove the 100% heights and use height: 100vh on the .d-flex.flex-column element. https://jsbin.com/vulipen/edit?html,output

[cr101]

Isn't postcss-flexbugs-fixes supposed to fix all these flex bugs?

[tavax]

For me the bug only appear on Safari Mac and for my problem, I can't adding a 100vh height to the item, it's a login form.

[mdo]

@cr101 Judging by the readme of the project, it's only intended to fix a handful.

[sandhya-nuthakki]

I have one issue with display: flex and flex-direction: column. in safari 11.1 it's working fine in chrome.

I have horizontal scroll bar for my gallery when scroll bar added to gallery my height of the gallery is not included scroll bar and below text is overriding on my scroll bar. We can't move the scroll bar.

If I resize my window then scroll bar is included in height of the gallery and every thing is working fine.

below is the link for details.

safari 11.1 display: flex, flex direction: column the height of the gallery is not growing until resize window
https://stackoverflow.com/q/51830710/10168145?sem=2