Flex difference between Chrome and Firefox

[rkostin]

Yikes! Look at this in both Chrome and Firefox.

http://codepen.io/rkostin/pen/doPzEM

Firefox keeps the content separated. Chrome screws it up.

With mixed results, I’ve been playing with flex-shrink, flex-grow, and flex-basis, but nothing I’ve found makes this layout act similarly in both modern browsers. Is this a Chrome bug?

[Paulie_D]

Don’t the children need to be display:flex too?

http://codepen.io/Paulie-D/pen/QbwqLB

[rkostin]

I’ve never seen the need to put flex on the child elements too, but doing so kinda works with this example. Thanks!

At least the two elements stay on their own sides now, but it looks like there’s another problem between Firefox and Chrome with the way they handle the height of the IMG.

Still though, other content (not an image on the left side) …not so good.
http://codepen.io/rkostin/pen/yNyzyZ

[eminer1254]

There’s no need to set the children to flex in this case.
The issue you’re seeing on Chrome is not showing up in Chrome Canary v 44.0.2383.0 So, it looks like a bug they fixed.

[Author]

Posts