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;}

  Add Student