Flexbox Item Not Expanding to Full Height of Parent Div in Safari

[mcopper1226]

Hi there,

I have set up a fairly basic flexbox grid with both images and text. It is working beautifully in Firefox and Chrome, but is buggy in Safari.

Here is a pen:
https://codepen.io/mcopper1226/pen/JKAAWb

As you can see by the red background, the blue div is not stretching to the full height of it’s parent container. However, this is only the case in Safari. (Currently running version 9.1.1)

I have run my css through autoprefixer.github.io, so I am fairly confident I am using all of the necessary prefixes.

I have done a ton of troubleshooting, but I am really new to flex, so I suspect I am missing something. Any help would be extremely appreciated!

[Historical Forums User]

Did you ever find a solution to this problem? It’s driving me up the wall and so far the only solution I’ve found was to disable flexbox altogether, but that created a whole bunch of different issues…

Edit: I ended up solving it by applying flex-basis: auto to the child elements.

[swinggraphics]

@AdamR, I think you must have had a different problem. I really wish your simple solution were the answer! This is a known bug, still not fixed as of Safari Mac 10.1 or iOS 10.3. It has been fixed in Webkit Nightly, so it looks like a fix will eventually make its way to the public! https://bugs.webkit.org/show_bug.cgi?id=137730

[Author]

Posts