Chromeboxのgrand-childはChromeの親の高さを高さに設定できません

Question

私はflexboxを使用しているウェブサイトを作っています。私はFirefoxとChromeの実装の違いを発見しました。私には、Chromeの動作が正しくないようです。

問題はこれです。 にdisplay: flexとflex-direction: rowがあるとします。このdivには、2人の子供c1とc2が含まれています。 c1とc2は同じ高さを持ちます。これはどちらの子供にもコンテンツをフィットさせるのに必要な最大の高さです。 c1（例：c11）に子供を追加すると、この子供（c11）は、その親の割合（c1）で高さを設定できません。 Firefoxでは、これは正常に動作します。ここでの違いを説明するためのフィドルは（FirefoxとChromeで開いている）である：あなたの仮想的な例では

https://jsfiddle.net/9pyn2urq/

Answer 1

、あなたはc1のための新しいフレックスコンテキストを作成し、align-items: stretchを追加する必要があります。

.c1 { 
    display: flex; 
    align-items: stretch; 
} 

私はこれらの新しいルールを使用するようにあなたのフィドルを修正しました。また、修正された例では、#flexy1の親がalign-items: stretchを使用しているので、#insideFlexyのheight: 100%を削除します。

https://jsfiddle.net/yo3x5bw5/