Firefox et FlexBox - Lorsque vous utilisez l'espace blanc: nowrap sur élément enfant les pauses boîte flexibles

StackOverflow https://stackoverflow.com/questions/7813783

  •  26-10-2019
  •  | 
  •  

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?

Était-ce utile?

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top