Flexbox, Firefox and the button element

Useful knowledge about flexbox#

When an element receives display: flex;, all children will be set to block-level. This is not an issue if the flexbox implementation is complete, but it's good to know about this little quirk.

Beware of the <button> element#

Interestingly, Firefox has not implemented flexbox for <button> in the same way as Webkit or Blink – yet. In Mozilla's implementation, the inline-block-like display behavior of <button> cannot be changed via CSS display. Consequently, if you set a <button> to display: flex; to vertically center, say, button text and an icon, it will look great in Chrome, but broken in Firefox: text and icon wrap because the CSS renderer sees the display: flex; and sets all children to block-level, even though the button does not actually become a flexbox container.

The good news: This is easily fixable by adding a <div> that wraps the items inside the button and applying the flexbox styles on it.

What's more, Mozilla has classified this behavior as a bug and is actively working on it (current status: RESOLVED FIXED in Firefox 52).