Flexbox setting wrong iframe height in Safari

Question

Using flex to set the iframe height in Safari doesn't work. In Safari, the iframe height is capped at the default height of 150.

This question and this question are similar, but the solutions didn't help.

This Codepen illustrates the problem: the red rectangle is much taller than 150px in Chrome and Firefox, nearly occupying all of the black rectangle as it should, but the iframe's only 150px tall in Safari.

Codepen: 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;
}

Answer 1

It seems that Safari is not able to resolve the height:100% for the iframe like Chrome and Firefox are doing. Instead you can consider the stretch effect of flexbox by adjusting your code like below:

#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;
  display:flex; /* Added */
  width: 100%;
  margin: 25px auto 25px;
}


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

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