flexbox在Safari中设置了错误的iframe高度

在Safari中使用flex设置iframe高度不起作用。在Safari中,iframe高度的上限为默认高度150。

This question 和 this question 是相似的,但解决方案没有帮助。

这个代码笔说明了这个问题:在Chrome和Firefox中,红色矩形比150px高得多,几乎占据了所有的黑色矩形,但在Safari中,iframe只有150px高。

代码笔: https://codepen.io/anon/pen/rEQbMG

<div id="rootBox">
  <div id="mainBox">
    <div id="previewBox">
      <iframe class="previewContent"></iframe>
    </div>
  </div>  
</div>

#rootBox {
  width: 100%;
  height: 700px;
  display: flex;
  background-color: #FFF;
  flex-grow: 1;
  box-sizing: border-box;
  margin: auto;
}

#mainBox {
  background: black;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  box-sizing: border-box;
}


#previewBox {
  background: yellow;
  flex-grow: 1;
  width: 100%;
  margin: 25px auto 25px;
}


#previewBox .previewContent {
  width: 100%;
  height: 100%;
  background: red;
}