SafariまたはChromeで、次にFirefoxでこのjsFiddleを見てください：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のコンテンツ全体に適合します。
他の誰かがこの振る舞いを見ましたか？修正がありますか？
私はrobertcによって受け入れられた答えが正しいと思いますが（それがボックスフレックスの仕組みです）。ボックスの幅を明示的に 0 に設定することで、彼が話している「固有の」幅を無効にすることができます。このようにして、指定した幅の分布のみが考慮されます。
すべてのボックス幅をゼロに設定すると、すべての幅が「残り」になるため、この動作は説明できます。したがって、分布は指定したものに完全に依存します。
要素に設定width: 0すると、それが「優先幅」になり、要素内の非折り返しテキストアイテムが正しく動作するようになります。
http://lists.w3.org/Archives/Public/www-style/2011Jan/0201.html
それが機能するはずです。Flexbox は、要素の固有の幅が計算された後に残りのスペースを分配します。要素自体の固有の幅は制御しません。これが、作業グループが仕様を見直しているにもかかわらず、物に明示的な幅を設定しないと、結果が直感的でない理由です.
同様の問題が発生する可能性がありますが、代わりにを使用display: table;することをお勧めします。