高さ100％のdivは、フレックスで配置された親を埋めることはありません

Question

フレックスボックスレイアウトで配置されている親を埋めるためにdivを作成しようとしています。 次のjsfiddleでわかるように、divの高さは親の高さを埋めるものではありません。

なぜ機能しないのですか？ （@mrmcgregからの更新：それはChromeで動作しますが、FF上で動作しません）

https://jsfiddle.net/z73pjtox/1/

HTML：

<header id="header"> 
    header 
</header> 

<div id="content"> 
     <div> 
     height: 100% 
     </div> 
</div> 

CSS：

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
    display: flex; 
    flex-flow: column; 
} 
#header { 
    flex: 0 1 auto; 
    background-color: green; 
} 
#content { 
    flex: 1 1 auto; 
    background-color: blue; 
} 
#content div { 
    height: 100%; 
    background-color: red; 
} 

Answer 1

私はあなたのフィドルをチェックします。 MacのFirefox 47でここで働いているようだ。どのブラウザを使用していますか？

私はフィドルをフォークし、いくつかの設定を変更して、期待されていたことを確認しましたが、まったく同じように機能しました。しかし、古いバージョンのSafariではここでは動作しません。多分、ベンダーの接頭辞を追加して、それが役立つかどうか試してみてください。

すべてのプレフィックスについてはlink on CSS Tricksを確認してください。

fiddle

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
} 
#header { 
    height:30px; 
    background-color: green; 
} 
#content { 
    display:flex; 
    flex-direction:column; 
    flex:1; 
    background-color: blue; 
} 
#content div { 
    flex:1; 
    height: 100%; 
    background-color: red; 
}