按钮弹性容器中的元素不会彼此对齐

Question

我有以下代码在Chrome和IE中按预期工作。但是在Firefox中，每个按钮中的第二个跨度显示在它自己的行中。为什么是这样？怎么解决这个问题？

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

期望（在IE浏览器中，Chrome可以运行）：

失败（在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：如果有必要，我不介意改变其他方面的改变：）

Answer 1

Flexbox相对较新，并未在旧版浏览器中实现。尝试

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

Answer 2

似乎<button>不能成为Firefox中的Flex容器。

无论如何，您可以使用额外的span来修复此问题，以包裹您的title＆amp; 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