MikaAK MikaAK - 27 days ago 8
CSS Question

Using display flex on a button makes it wrap in Firefox

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



FireFox

Chrome



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

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>