元素將不會在按鈕彈性容器中彼此靠近對齊

Question

我有以下代碼，它在Chrome和IE中按預期工作。然而在Firefox中，每個按鈕中的第二個跨度顯示在它自己的行中。爲什麼是這樣？這怎麼解決？

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

期望（在IE，鉻作品）：

失敗（在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

看起來好像<button>不能成爲Firefox中的彈性容器。

反正你可以修復使用附加span來包裝你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

Answer 2

的Flexbox的是相對較新的和舊的瀏覽器未實現。嘗試

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