ボタンフレックスコンテナで要素が隣り合わせに整列しない

Question

ChromeとIEで期待通りに動作する次のコードがあります。しかしFirefoxでは、各ボタンの2番目のスパンがそれ自身の行に表示されます。どうしてこれなの？どのようにこれを修正することができますか？ （IE、クローム作品中）

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

期待：（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

試してみてください。

とにかく、あなたは追加のspanを使用すると、 `div`で` 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

フレキシボックスは比較的新しく、古いブラウザで実装されていません。 Firefoxでフレックスコンテナすることはできません<button>のように思える

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