CODEWITHSUNDEEP
cssgoogle-chromefirefoxflexboxpseudo-element
Fidel90
Fidel90

Reputation: 1838

CSS flexbox wraps content in FireFox (not Chrome)

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

Upvotes: 6

Views: 2195

Answers (3)

MADJAR
MADJAR

Reputation: 67

Applying flex-shrink: 0 Fixed this issue for me

Upvotes: 0

Oriol
Oriol

Reputation: 288010

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>

Upvotes: 7

Nanang Mahdaen El-Agung
Nanang Mahdaen El-Agung

Reputation: 1434

You need to specify display: -moz-box; to works on FF. Check the updated Fiddle.

Upvotes: 4

Related Questions