Firefox und Flexbox - Bei Verwendung des weißen Raums: Nowrap on Child Element Die flexible Box bricht

Question

Schauen Sie sich diese JSFiddle in Safari oder Chrom, dann in Firefox an: http://jsfiddle.net/brandondurham/lrjhm/

Wie es in Webkit aussieht: http://cloud.smallparade.com/b4te

Wie es in Firefox aussieht: http://cloud.smallparade.com/b53r

Sie werden sehen, dass die flexible Schachtel in Firefox gebrochen ist. Die länger der beiden Kisten (.left) hat das CSS -Eigentum white-space einstellen nowrap Weil ich nicht möchte, dass es wickelt. Diese einzelne Eigenschaft macht den flexiblen Box brechen und erstreckt sich, um den gesamten Inhalt des .left div.

Hat noch jemand dieses Verhalten gesehen? Haben Sie eine Lösung?

Answer 1

So soll es funktionieren. Flexbox verteilt den übrig gebliebenen Raum, nachdem die intrinsische Breite der Elemente berechnet wurde, und steuert die intrinsische Breite der Elemente selbst nicht. Deshalb sind die Ergebnisse unintuitiv Wenn Sie keine explizite Breite für Dinge festlegen, überprüft die Arbeitsgruppe jedoch die Spezifikation.

Mein Rat wäre zu Versuchen Sie es zu verwenden display: table; stattdessen, obwohl Sie auf einige ähnliche Probleme stoßen können.

Answer 2

Ich denke zwar die akzeptierte Antwort von Robertc (darin soll Box Flex so funktionieren). Sie können die "intrinsische" Breite deaktivieren, über die er spricht, indem Sie diese Breite der Box explizit auf 0 festlegen. Auf diese Weise wird nur Ihre angegebene Verteilung der Breiten berücksichtigt.

Dieses Verhalten kann erläutert werden, da die Verteilung vollständig von dem abhängt, was Sie angeben, hängt die Verteilung vollständig von dem, was Sie angeben.

Answer 3

Satz width: 0 Auf dem Element und das wird es "bevorzugte Breite" und wird nicht umrappende Textelemente innerhalb des Elements richtig verhalten.

http://lists.w3.org/archives/public/ww-style/2011jan/0201.html