Using display flex on a button makes it wrap in Firefox - html

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>

Answer 1

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

Answer 2

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>