Elemente werden nicht nebeneinander in Button Flex Container

Question

Ich habe den folgenden Code, der wie erwartet in Chrome und IE funktioniert. In Firefox wird jedoch der zweite Bereich in jeder Taste in einer eigenen Zeile angezeigt. Warum ist das? Wie kann das behoben werden?

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

Erwartung (in IE, Chrome funktioniert):

Ausfallen (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: Ich ändere nichts dagegen, die Spannweiten für etwas anderes, wenn nötig :)

Answer 1

Es scheint, wie <button> kein flex Behälter in Firefox sein kann.

Auf jeden Fall können Sie beheben, dass eine zusätzliche span mit wickeln Ihre 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

Die Flexbox Wechsel relativ neu ist und nicht in älteren Browsern implementiert. Versuchen

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