CSS flexbox wraps content in Firefox (not Chrome)

Question

I have a button consisting of an <i> and <span> element (icon and some text). Now both have different sizes, so I apply flexbox to my button, which should position my elements well. In Chrome, everything works as I expected, but using the page in the current FF leads to wrapping my button inside content. The icon is displayed using the :before pseudo-element.

Jsfiddle

Who is wrong here? This is FF or Chrome (and me). What should I do to get the same result in any browser (icon in front of text, vertical center, without a wrapper)?

Answer 1

Weird The button elements have some special behavior that seems to conflict with flexbox.

In particular, it happens that flex items are locked according to the specification :

display value of the flex item is locked : if the specified display child stream in the item stream making the flex container is an inline level value, it computes to its block level equivalent.

Therefore, i and span , which will be inline , will become block s.

However, the flexibility properties do not seem to apply to the flexibility container button , nor to the flex i and span elements.

Thus, flexibility elements are displayed according to the formatting context of the block instead of flexible, and since they are block s, they are displayed on different lines.

One way to fix this is to wrap the contents in a container and make it a flex container instead of the button itself.

 div { display: flex; align-items: center; } i { width: 12px; text-align: center; font-size: 22px; } i:before { content: "\2193"; } span { font-size: 16px; margin-right: 10px; } 

 <button> <div> <i></i> <span>Text</span> </div> </button> 

Also consider simplifying markup.

 span { display: flex; align-items: center; font-size: 16px; margin-right: 10px; } span:before { content: "\2193"; width: 12px; text-align: center; font-size: 22px; } 

 <button> <span>Text</span> </button> 

Answer 2

You need to specify display: -moz-box; to work with FF. Check out the updated Fiddle .