Firefox et FlexBox - Lorsque vous utilisez l'espace blanc: nowrap sur élément enfant les pauses boîte flexibles
Question
Jetez un oeil à ce jsFiddle dans Safari ou Chrome, puis dans Firefox: http://jsfiddle.net/brandondurham/LRJhm/
Qu'est-ce qu'il ressemble à Webkit: http://cloud.smallparade.com/B4TE
Qu'est-ce qu'il ressemble à Firefox: http://cloud.smallparade.com/B53R
Vous verrez la boîte flexible est cassé dans Firefox. Plus des deux cases (.left
) a la propriété white-space
ensemble à css nowrap
parce que, eh bien, je ne veux pas l'envelopper. Cette propriété unique fait la pause boîte flexible et étendre pour adapter le contenu du .left
div.
Quelqu'un d'autre vu ce comportement? Avoir une solution?
La solution
Voilà comment il est censé fonctionner. Flexbox distribue la gauche dans l'espace après la largeur intrinsèque des éléments a été calculé, il ne contrôle pas la largeur intrinsèque des éléments eux-mêmes. Ceci est la raison pour laquelle les résultats sont unintuitive si vous n » t définir la largeur explicites sur les choses, bien que le groupe de travail examine les spécifications.
Mon conseil serait de essayer d'utiliser display: table;
au lieu , bien que vous pouvez rencontrer des problèmes similaires .
Autres conseils
Alors que je pense que la réponse acceptée par RobertC est correcte (dans ce comment flex boîte est censé fonctionner). Vous pouvez désactiver la « intrinsèque » largeur il parle en établissant que la largeur de la boîte explicitement à 0. De cette façon, que votre distribution spécifiée des largeurs est prise en compte.
Ce comportement peut être expliqué, parce que, lorsque vous définissez toutes les largeurs de boîte à zéro, alors toute la largeur deviendra « restant », ainsi la distribution dépend entièrement de ce que vous spécifiez.
Set width: 0
sur l'élément et qui deviendra lui est « largeur préférée », et fera des éléments de texte non-emballage à l'intérieur du élément se comportent correctement.
http://lists.w3.org/Archives/ / public www style / 2011Jan / 0201.html