Hey there! I'm currently grappling with ensuring that this (3-3) flexbox layout appears consistently on both Chrome and Firefox browsers.
If you'd like to see a functioning example of what I'm trying to achieve (three columns and two rows) in both browsers, you can check out this Codepen: http://codepen.io/ntdb/pen/rabxzz. The relevant CSS from that Codepen is as follows:
*
box-sizing border-box
.container
display flex
flex-wrap wrap
.item
display flex
flex 1 0 33.333%
flex-direction row
flex-flow wrap
justify-content center
While this webpage displays correctly (3-3) in Firefox (version 36.0.4 on Mac), it does not render properly in Chrome (version 41.0.2272.104 (64-bit) on Mac), showing a 2-3-1 layout:
Initially, I suspected the issue might be related to subpixel rendering. However, now that I have a functional version (the Codepen), I'm no longer convinced that's the problem. Can anyone point out the problematic code on the linked webpage?
This is what I'm aiming for (and what Firefox correctly displays):
And this is what shows up in Chrome:
Thank you in advance for any assistance!