Flexbox嵌套容器没有扩展到在Safari中填充父项

Question

我试图做一个嵌套的100％屏幕布局，但我遇到了一个问题，其中嵌套的容器没有在Safari中填充100％的父单元空间，即使细胞本身确实扩大以填充所有可用空间。如果我将subContainer设置为实际的Flex单元格，它也可以工作，但由于实际原因，我无法做到这一点。有任何想法吗？

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似乎避免计算非flex嵌套容器。

看看到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>