フレックスボックスネストされたコンテナがサファリの塗りつぶしに展開されない

Question

ネストされた100％スクリーンレイアウトを作成しようとしていますが、ネストされたコンテナがサファリの親セルのスペースの100％セル自体が拡張されて利用可能なすべてのスペースを埋める。私がサブコ​​ンテナを実際のフレックスセルにしても動作しますが、実際の理由でそれを行うことはできません。何か案は？

jsfiddle

HTML：

<div id="masterContainer"> 
    <div id="header"> 
    header 
    </div> 

    <div id="content"> 

    <div id="subContainer"> 
     <div id="left"> 
     left 
     </div> 
     <div id="right"> 
     right 
     </div> 
    </div> 

    </div> 

</div> 

CSS：

#masterContainer { 

    display: flex; 
    flex-direction: column; 
    width: 200px; 
    height: 200px; 
} 

#header { 

    background: yellow; 
} 

#content { 

    background: grey; 
    flex: 1; 
} 

#subContainer { 

    display: flex; 
    width: 100%; 
    height: 100%; 
} 

#left { 

    background: red; 
    width: 50; 
} 

#right { 

    background: green; 
    flex: 1; 
} 

Answer 1

これはSafariでこの問題の回避策です。
Safariは、非フレックスネストされたコンテナの計算を避けているようです。 - 私は、インラインスタイルで、この中に反応し、ルータをやっているので、その後、私は＃のスタイルを変更can't：詳細な説明は：

this answerを見

#masterContainer { 
 
    
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
#header { 
 
    
 
    background: yellow; 
 
} 
 

 
#content { 
 
    background: grey; 
 
    flex: 1; 
 
    position: relative; 
 
} 
 

 
#subContainer { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
} 
 

 
#left { 
 
    
 
    background: red; 
 
    width: 50px; 
 
} 
 

 
#right { 
 
    
 
    background: green; 
 
    flex: 1; 
 
}

<div id="masterContainer"> 
 
    <div id="header"> 
 
    header 
 
    </div> 
 
    
 
    <div id="content"> 
 
    
 
    <div id="subContainer"> 
 
     <div id="left"> 
 
     left 
 
     </div> 
 
     <div id="right"> 
 
     right 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 
    
 
</div>