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.
I've set up a similar example for you, which is responsive and works in Firefox/Safari/Chrome. There are several ways to do this kind of layout, but this is how I'd do it: https://preview.webflow.com/preview/grid-example-eb7dac?preview=d28d84a6c89245289d390a563e17f3fc
Hope this helps.