Firefox ignores vertical margins on flex items (children of a flexbox) unless explicit height is declared on container

Question

I have a responsive percentage based grid created with flexbox using percentage based margins. It plays fine in Chrome and Safari. However Firefox collapses the margins unless a

Answer 1

You can give the margin width in percentages and the margin height in vw units. This only works if the flexbox wrapper isn't given a fixed width.

For example: margin: 0 2% 2vw 0;

Working example: http://codepen.io/anon/pen/JKGjdB