Firefox and Flexbox-ホワイトスペースを使用する場合：子どもの要素にNowrap柔軟なボックスが切れます

Question

SafariまたはChromeでこのJSFiddleを見て、Firefoxでご覧ください。 http://jsfiddle.net/brandondurham/lrjhm/

WebKitでどのように見えるか： http://cloud.smallparade.com/b4te

Firefoxでどのように見えるか： http://cloud.smallparade.com/b53r

柔軟なボックスがFirefoxで壊れていることがわかります。 2つのボックスのうち長い（.left）CSSプロパティがあります white-space に設定 nowrap なぜなら、まあ、私はそれが包まれたくないからです。この単一のプロパティは、柔軟なボックスブレイクを行い、 .left div。

他の誰かがこの行動を見ましたか？修正がありますか？

Answer 1

それが機能するはずです。 FlexBoxは、要素の固有の幅が計算された後、左側の空間を分布させ、要素自体の固有の幅を制御しません。これが結果がある理由です 直感的ではありません ワーキンググループが仕様をレビューしているが、物事に明示的な幅を設定しない場合。

私のアドバイスはそうです 使用してみてください display: table; 代わりは, 、いくつかの同様の問題に遭遇する可能性がありますが。

Answer 2

ロバートの受け入れられた答えは正しいと思います（それは、Box Flexが機能するはずです）。ボックスの幅を明示的に0に設定することにより、彼が話している「固有の」幅を無効にすることができます。この方法では、幅の指定された分布のみが考慮されます。

この動作は説明できます。なぜなら、すべてのボックス幅をゼロに設定すると、すべての幅が「残り」になるため、分布は指定するものに完全に依存するためです。

Answer 3

設定 width: 0 要素では、それが「優先幅」になり、要素内の非巻き上げテキストアイテムを正しく動作させます。

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