Firefoxがflexed divの高さを尊重しないのはなぜですか？Chromeは何ですか？

Question

これは、簡単な例で最もよく説明されています。

display: flexとflex-direction: columnのコンテナがあり、内部には1つのdivがあり、height: 300pxとflex: 1です。

Chromeはネストされたdivを300pxの高さでレンダリングしますが、Firefoxでは1行でレンダリングされます。これは、2つのブラウザ間のフレックスボックスの実装間の微妙な違いですか、それとも何とかこの悪いコードですか？ニュアンスがある場合、軽減する最良の方法は何ですか？次のように

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.container > div { 
 
    background-color: #666; 
 
    color: white; 
 
    flex: 1; 
 
    height: 300px; 
 
}

<div class="container"> 
 
    <div>Single line in Firefox, but 300px tall in Chrome!</div> 
 
</div>

Answer 1

flex: 1速記ルールが壊れる：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

Chromeではこれが表示されますが、flex-basisはheight: 300pxで上書きされます。

Firefoxはこれを見ていますが、はを無効にします。flex-basisをheight: 300pxと置き換えます。

シンプルなクロスブラウザのソリューションは、heightルールを取り除くためにあるとだけ使用します。

7.1. The flex Shorthand

：

flex: 1 0 300px 

スペックの面では、Firefoxが正しい動作を持っています

ボックスがフレックスアイテムである場合は、メインサイズ の代わりにflexが参照されます。 eボックス。

フレックス項目のmain size propertyは widthまたはheightプロパティのいずれかです。