- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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!
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! https://bugs.webkit.org/show_bug.cgi?id=137730