Elements won't align next to each other in button flex container

Question

I have the following code which works as expected in Chrome and IE. However in Firefox the second span in each button shows in its own line. Why is this? How can this be fixed?

https://jsbin.com/banafor/4/edit?html,css,output

Expectation (in IE, Chrome works):

Fail (in Firefox):

.buttons-pane {
  width: 150px;
  height: 400px;
}
button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
button .title {
  background-color: yellow;
}
button .interest {
  background-color: lightyellow;
}

<div class="buttons-pane">

  <button type="button">
    <span class="title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</span>
    <span class="interest">Short</span>
  </button>

  <button type="button">
    <span class="title">Neque porro quisquam</span>
    <span class="interest">LongInterest</span>
  </button>

  <button type="button">
    <span class="title">Vix aeterno vocibus vituperatoribus eu. Nec regione fuis</span>
    <span class="interest">Keyword</span>
  </button>

</div>

PS: I don't mind changing changing the spans for something else if necessary :)

wrap both the `span` in a `div`, then add the css property `display:table;` to the div and the css property `display:table-cell;vertical-align:middle;` to both the spans . Link: https://jsbin.com/qiniwozilu/edit?html,css,output — Dev Man, Sep 08 '16 at 09:32

score 1 · Answer 1 · answered Sep 08 '16 at 09:32

1

The flexbox is relatively new and not implemented in older browsers. Try

display: -webkit-flex;
display: -moz-flex;
display: flex;

answered Sep 08 '16 at 09:32

Dimitri L.

4,499
1
15
19

Thank you for the suggesstion. I will add that in my production code. Here I try to put things the simplest possible. – nacho4d Sep 08 '16 at 09:34

score 1 · Accepted Answer · answered Sep 08 '16 at 09:50

It seems like <button> cannot be a flex container in Firefox.

Anyway you can fix that using an additional span to wrap your title & interest

<button type="button" >
    <span class="wrapper">
      <span class="title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</span>
      <span class="interest">Short</span>
    </span>
</button>

css

.buttons-pane {
    width: 150px;
    height: 400px;
}

button .wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

button .wrapper .title {
  background-color: yellow;
}
button .wrapper .interest {
  /* max-width: 50px; */
  background-color: lightyellow;
}

jsbin

Elements won't align next to each other in button flex container

2 Answers2