Using a flex display on a button makes it wrapped in Firefox

Question

For some reason, using Display Flex like this causes the elements to wrap one instance of eachother in Mozilla. Is there a reason for this? It works great in Chrome, and they are on the same 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

I would use a lighter method for the display:inline-block buttons:

 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: The Firefox trunk build has changed to meet user expectations for this issue. This change will be pre-located in Firefox 52, which I think will be sent in March 2017.]

So a few things:

• The display property has almost no effect on <button> in Firefox, as described in https://bugzilla.mozilla.org/show_bug.cgi?id=984869 , except that you can choose whether the button is block or inline. (This also applies to <table> and <fieldset> , both for Chrome and Firefox.)

• The effect you see (wrapping) is due to the flexbox quirk - things with display:flex make their children be blocky. So your <svg> and <span> elements become display:block instead of their default display:inline , and so each one gets its own line (because each one is now a block). This happens even though the button does not actually become a flex container because the entire style system sees the style data - therefore, it sees " display:flex " on the parent and blocks the children. He does not know that we are on <button> , which is a special and non-factually flexible container. Perhaps this could be a bug in Firefox; I'm not sure carelessly.

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

Here's the updated version of the code snippet (with the -moz removed, the prefix version, because, as another answer pointed out, -moz-flex not 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>