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

Answer 1

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>

Answer 2

[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:

1. 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.)

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