Firefox e FlexBox - Quando si utilizza white-space: nowrap sul elemento figlio casella flessibile rompe

Question

Date un'occhiata a questo jsFiddle in Safari o Chrome, quindi in Firefox: http://jsfiddle.net/brandondurham/LRJhm/

Che assomiglia a Webkit: http://cloud.smallparade.com/B4TE

come appare in Firefox: http://cloud.smallparade.com/B53R

vedrete la casella flessibile è rotto in Firefox. Il più lungo dei due riquadri (.left) ha la proprietà css white-space impostata su nowrap perché, beh, non voglio che vada a capo. Questa singola proprietà sta facendo si che la scatola flessibile si rompa e si estenda per adattarsi all'intero contenuto del div .left.

Qualcun altro ha visto questo comportamento? Hai una soluzione?

Answer 1

Ecco come dovrebbe funzionare. Flexbox distribuisce lo spazio sinistro dopo che è stata calcolata la larghezza intrinseca degli elementi, ma non controlla la larghezza intrinseca degli elementi stessi. Questo è il motivo per cui i risultati sono unintuitive se non si impostano larghezze esplicite sugli oggetti, sebbene il gruppo di lavoro stia riesaminando le specifiche.

Il mio consiglio sarebbe try using display: table; instead, anche se è possibile che si verifichino problemi simili.

Answer 2

Mentre penso che la risposta accettata da robertc sia corretta (in questo modo si suppone che box flex funzioni). È possibile disabilitare la larghezza "intrinseca" di cui parla impostando esplicitamente la larghezza della casella su 0. In questo modo, viene presa in considerazione solo la distribuzione specificata delle larghezze.

Questo comportamento può essere spiegato, perché, quando si impostano tutte le larghezze del riquadro su zero, tutta la larghezza diventerà "rimanente", quindi la distribuzione dipende completamente da ciò che si specifica.

Answer 3

Impostare width: 0 sull'elemento e diventerà la "larghezza preferita" e farà sì che gli elementi di testo non a capo all'interno dell'elemento si comportino correttamente.

http://lists.w3.org/Archives/Public/www-style/2011Jan/0201.html