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

This has been reported before as a bug in Firefox/Gecko, but it's actually a bug in Chrome/Blink.

On a child of a block (display:block) element, percent margin & padding will resolve against the block's width. That's likely the behavior you're expecting, and that's what Blink incorrectly does for children of flex containers, as described in the bug page above.

But, in a flex container, percent margin & padding are supposed to resolve against the respective dimension (so, e.g. margin-top/margin-bottom will be resolved against the container's height).

Moreover, if the container doesn't have a definite height (e.g if it has height:auto) then percentages can't be resolved, so they resolve to 0.

Answer 2

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