Firefox ignores vertical margins on flex items (ch

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 an explicit height is set on the elements. Anyone know a workaround?

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