html - Flexbox 在 Safari 中设置错误的 iframe 高度

Question

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

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

这个 Codepen 说明了这个问题:红色矩形在 Chrome 和 Firefox 中比 150px 高得多，几乎占据了它应该占据的所有黑色矩形，但 iframe 在 Safari 中只有 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;
}

Answer 1

Safari 似乎无法像 Chrome 和 Firefox 那样为 iframe 解析 height:100%。相反，您可以通过如下调整代码来考虑 flexbox 的拉伸(stretch)效果:

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