CSS flexbox wraps content in FireFox (not Chrome)

Question

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 :before pseudoelement.

JSFiddle

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)?

Answer 1

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

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

Therefore, the i and the span, which would be inline, become blocks.

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

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.

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