I have a
button that consists of an
<i> and an
<span> element (an icon and some text). Now both have different sizes so I'm applying a flexbox to my button that should center my items nicely. In Chrome everything works as I expected but using the page in a current FF results in wrapping my inner content of the button. The icon is displayed via a
Who is wrong here? Is it FF or is it Chrome (and me). What should I do to get the same result in either browser (icon before text, vertical center, no wrap)?
Best How To :
button elements have some special behavior which seems to conflict with flexbox.
Specifically, what happens is that the flex items are blockified, according to the spec:
display value of a flex item is blockified: if the specified
display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.
i and the
span, which would be
However, flex properties do not seem to apply neither to the flex container
button nor to the flex items
So the flex items are displayed according to the block formatting context instead of the flex one, and since they are
blocks, they appear at different lines.
One way to fix it is wrapping the contents in a container, and make it the flex container, instead of the button itself.
Also consider simplifying the markup.