Flexbox неправильно устанавливает высоту iframe в Safari

Question

Использование flex для установки высоты iframe в Safari не работает. В Safari высота iframe ограничена высотой по умолчанию 150.

Этот вопрос и этот вопрос похожи, но решения не помогли.

Этот Codepen иллюстрирует проблему: красный прямоугольник намного выше, чем 150px в Chrome и Firefox, почти занимает весь черный прямоугольник, как и должно быть, но в Safari высота iframe составляет всего 150px.

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

Кажется, что Safari не может разрешить height:100% для iframe, как это делают Chrome и Firefox.Вместо этого вы можете рассмотреть эффект растяжения flexbox, скорректировав свой код, как показано ниже:

#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>