The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #243676

    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:

    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, 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!


    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.


    @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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.