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 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.