親がフレックスの場合は高さ100％のアイテム：Chromeのバグ？

Question

は、我々は、このマークアップを持っているとしましょう：

<div id="outer"> 
    <div id="middle"> 
    <div id="inner"> 
    </div> 
    </div> 
</div> 

と、このCSS：

#outer { 
    display: flex; 
    flex-direction: column; 
    background-color: white; 
    height: 300px; 
} 

#middle { 
    flex-grow: 1; 
    background-color: beige; 
} 

#inner { 
    background-color: black; 
    height: 100%; 
} 

それがミドルフレックスほど高くすべきであると私は、内側のdiv要素は、全体300ピクセルに及ぶことを期待しますアイテムが親をいっぱいにします。

これはIE、Edge、Firefoxで見られる動作です。

Chromeでは、中央のdivはまだ300ピクセルを塗りつぶしますが、内側のdivは高さ属性がなくても高くなります。

このフィドルを参照してください： https://jsfiddle.net/mhjussna/右、Chromeのバグです

？

Answer 1

flex-grow:1を#middle divに使用していることが原因です。

flex:1という推奨の略記号を使用している場合、それは完全に機能します。

#outer { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: white; 
 
    height: 300px; 
 
} 
 
#middle { 
 
    flex: 1; 
 
    /* here */ 
 
    background-color: beige; 
 
} 
 
#inner { 
 
    background-color: black; 
 
    height: 100%; 
 
    color: white; 
 
}

<div id="outer"> 
 
    <div id="middle"> 
 
    <div id="inner"> 
 
     x 
 
    </div> 
 
    </div> 
 
</div>

あるいは

、状態

#middle { 
    flex-grow: 1; 
    flex-shrink:0; 
    flex-basis:0; 
    background-color: beige; 
} 

JSfiddle Demo

Answer 2

私はそれがChromeのバグだとは思わない。 W3C勧告https://www.w3.org/TR/CSS2/visudet.html#the-height-propertyから

：

は割合の高さを指定します。パーセンテージは、生成されたボックスの包含ブロックの高さに対して計算されます。包含ブロックの高さが明示的に指定されていない場合（すなわち内容の高さに依存する）、この要素は絶対的に配置されていない場合、値は 'auto'に計算されます。

#middleにheight: 100%を設定すると、他のブラウザhttps://jsfiddle.net/mhjussna/1/と同じ結果になります。