Firefox and Flexbox-ホワイトスペースを使用する場合:子どもの要素にNowrap柔軟なボックスが切れます
質問
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。
他の誰かがこの行動を見ましたか?修正がありますか?
解決
それが機能するはずです。 FlexBoxは、要素の固有の幅が計算された後、左側の空間を分布させ、要素自体の固有の幅を制御しません。これが結果がある理由です 直感的ではありません ワーキンググループが仕様をレビューしているが、物事に明示的な幅を設定しない場合。
私のアドバイスはそうです 使用してみてください display: table;
代わりは, 、いくつかの同様の問題に遭遇する可能性がありますが。
他のヒント
ロバートの受け入れられた答えは正しいと思います(それは、Box Flexが機能するはずです)。ボックスの幅を明示的に0に設定することにより、彼が話している「固有の」幅を無効にすることができます。この方法では、幅の指定された分布のみが考慮されます。
この動作は説明できます。なぜなら、すべてのボックス幅をゼロに設定すると、すべての幅が「残り」になるため、分布は指定するものに完全に依存するためです。
設定 width: 0
要素では、それが「優先幅」になり、要素内の非巻き上げテキストアイテムを正しく動作させます。
http://lists.w3.org/archives/public/www-style/2011jan/0201.html