Firefox e FlexBox - Quando si utilizza white-space: nowrap sulla elemento figlio la casella pause flessibili
https://stackoverflow.com/questions/7813783
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Date un'occhiata a questo jsFiddle in Safari o Chrome, quindi in Firefox: http://jsfiddle.net/brandondurham/LRJhm/
Come appare in Webkit: http://cloud.smallparade.com/B4TE
Come appare in Firefox: http://cloud.smallparade.com/B53R
Vedrai la casella flessibile è rotto in Firefox. Il più lungo dei due scatole (.left) ha la proprietà css white-space insieme a nowrap perché, beh, io non lo voglio per avvolgere. Questa singola proprietà sta facendo la pausa scatola flessibile e si estendono per adattare l'intero contenuto del div .left.
Chiunque altro visto questo comportamento? Avere una correzione?
Soluzione
Ecco come si suppone di lavoro. Flexbox distribuisce lo spazio che rimane dopo la larghezza intrinseca degli elementi è stato calcolato, non controlla la larghezza intrinseca degli elementi stessi. Questo è il motivo per cui i risultati vengono intuitivo se si don' t impostato larghezze esplicite cose, anche se il gruppo di lavoro sta esaminando la spec.
Il mio consiglio sarebbe quello di provare a utilizzare display: table; invece , anche se è possibile riscontrare alcuni problemi simili .
Altri suggerimenti
Mentre penso che la risposta accettata dalla robertc è corretto (in questo è il modo Box Flex si suppone che il lavoro). È possibile disattivare la "intrinseca" width parla impostando che la larghezza della scatola in modo esplicito a 0. In questo modo, solo la vostra distribuzione specificata delle larghezze viene preso in considerazione.
Questo comportamento può essere spiegato, perché, quando si impostano tutte le larghezze di molto zero, allora tutta la larghezza diventerà "residuo", così la distribuzione dipende completamente a quanto specificato.
Imposta width: 0 sull'elemento e che diventerà essa la "larghezza preferita", e farà in modo corretto gli elementi di testo non avvolgimento all'interno dell'elemento si comportano.
http://lists.w3.org/Archives/ / Public www-style / 2011Jan / 0201.html
