Using display flex on a button makes it wrap in Firefox

Question

For some reason using display Flex like this causes the items to wrap one ontop of eachother in Mozilla. Is there a reason for this? In Chrome it works fine and they are on one line in the middle.

FireFox

Chrome

button.primary {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

svg {
  width: 15px
}

<button class="primary add-student">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.6 15.6 114.7 114.7" enable-background="new 15.6 15.6 114.7 114.7" xml:space="preserve" class="plus">
  <path d="M128.1 59.6c-1.5-1.5-3.4-2.3-5.5-2.3H88.6V23.5c0-2.2-0.8-4-2.3-5.5 -1.5-1.5-3.4-2.3-5.5-2.3H65.2c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v33.9H23.5c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v15.6c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h33.9v33.9c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h15.6c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V88.6h33.9c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V65.2C130.4 63 129.6 61.2 128.1 59.6z"></path>
</svg><span>Add Student</span>
      </button>

related: http://stackoverflow.com/q/33344121/3597276 – Michael Benjamin Jan 13 '16 at 12:16 — Michael Benjamin, Jan 13 '16 at 12:16

dholbert · Answer 1 · 2016-11-10T21:08:05.117

[UPDATE: Firefox trunk builds have changed to match the questioner's expectations on this issue. This change will tentatively be in Firefox 52, which I believe ships in March 2017.]

So, a few things:

The display property has almost no effect on a <button> in Firefox, as described in https://bugzilla.mozilla.org/show_bug.cgi?id=984869, aside from letting you choose whether the button is block-level or inline-level. (This is also true of <table> and <fieldset>, in both Chrome and Firefox.)
The effect you're seeing (wrapping) is happening because of a quirk of flexbox -- things with display:flex force their children to be block-level. So, your <svg> and <span> elements become display:block instead of their default display:inline, and so they each get their own line (because they're each a block now). This happens even though the button doesn't actually become a flex container, because all the style system sees is style data -- so it sees "display:flex" on the parent & blockifies the children. It doesn't know that we happen to be on a <button> which is special and not-actually-a-flex-container. This might be arguably a bug in Firefox; I'm not sure, offhand.

ANYWAY - if you're trying to set dipslay:flex on a <button>, what you actually need is a wrapper-div inside your <button>, to contain the <svg> and <span>, and which you can style to be a flex container.

Here's an updated version of your code snippet (with -moz prefixed version removed, since as another answer pointed out, -moz-flex isn't recognized in any supported version of Firefox):

div.buttonContents {
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
button.primary {
  padding: 10px 20px;
}

svg {
  width: 15px
}

<button class="primary add-student">
  <div class="buttonContents">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.6 15.6 114.7 114.7" enable-background="new 15.6 15.6 114.7 114.7" xml:space="preserve" class="plus">
  <path d="M128.1 59.6c-1.5-1.5-3.4-2.3-5.5-2.3H88.6V23.5c0-2.2-0.8-4-2.3-5.5 -1.5-1.5-3.4-2.3-5.5-2.3H65.2c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v33.9H23.5c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v15.6c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h33.9v33.9c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h15.6c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V88.6h33.9c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V65.2C130.4 63 129.6 61.2 128.1 59.6z"></path>
    </svg><span>Add Student</span>
  </div>
</button>

Great answer and should be marked as the "right" answer by OP! — LostInQuery, Dec 08 '16 at 20:39

score 2 · Accepted Answer · answered Dec 23 '14 at 12:56

I would use more light weight method for buttons display:inline-block:

button {
  height: 40px;
  padding: 0 10px;
  white-space: nowrap;}
  button * {
    display: inline-block;
    vertical-align: middle;}
  button svg {
    height: 15px;
    margin-right: 5px;}

<button class="primary add-student">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.6 15.6 114.7 114.7" enable-background="new 15.6 15.6 114.7 114.7" xml:space="preserve" class="plus">
  <path d="M128.1 59.6c-1.5-1.5-3.4-2.3-5.5-2.3H88.6V23.5c0-2.2-0.8-4-2.3-5.5 -1.5-1.5-3.4-2.3-5.5-2.3H65.2c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v33.9H23.5c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v15.6c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h33.9v33.9c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h15.6c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V88.6h33.9c2.2 0 4-0.8 5.5-2.3 1.5-1.5 2.3-3.4 2.3-5.5V65.2C130.4 63 129.6 61.2 128.1 59.6z"></path>
</svg><span>Add Student</span>
</button>

Great info, the vertical-align is the thing centering it? Why does vertical align work here I have a hard time understanding that one. — MikaAK, Dec 23 '14 at 18:30
Good to hear. Vertical-align here affects items, button element itself aligns items vertically middle. Display:inline-block elements with outer white-space:nowrap just stick horizontally together. — vkjgr, Dec 24 '14 at 07:15

Using display flex on a button makes it wrap in Firefox

FireFox

Chrome

2 Answers2

Linked