Loving the new flexbox shiz but I’m having a slight problem which I cant work out though. I’m trying to achieve a slightly different grid set up (see link) and the Left hand column doesn’t seem to work when viewed in Firefox/Safari but looks great in Chrome. It’s like the vertical stacking isn’t working in other browsers.
Since flexbox isn’t suited for having variable sizes of nested items across both horizontal and vertical dimensions (flex container is essentially a single-dimension layout mechanism), doing this kind of layout might be tricky. But, with a little dose of imagination, everything is possible (and you almost did it yourself).
It’s quite hard to inspect you design, because of the complex structure, but I’ve noticed that you use “Wrap Children” setting on vertical flex containers (which you shouldn’t, because setting direction to Column already makes the children “stack” on top of each other). Having “Wrap Children” on a Flex Column container can potentially wrap nested items onto next “column” to the right, which looks like the issue you had in Firefox.