html - Flexbox 嵌套容器不会扩展以填充 safari 中的父级

Question

我试图制作一个嵌套的 100% 屏幕布局，但我遇到了一个问题，即嵌套容器没有填充 safari 中父单元格空间的 100%，即使单元格本身确实展开以填充所有可用空间。如果我将 subContainer 设置为实际的 flex cell，它也可以工作，但出于实际原因我不能这样做。有什么想法吗？

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>