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>