Question

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

This question和this question相似，但是解决方案无济于事。

此Codepen说明了问题：红色矩形比Chrome和Firefox中的150px高得多，几乎占据了所有黑色矩形，而iframe在Safari中只有150px高。

Codepen：https://codepen.io/anon/pen/rEQbMG

{{ [ y[int] for y in x[obj] for x in arr ] | sum }}

Answer 1

似乎Safari无法像Chrome和Firefox一样为iframe解析height:100%。相反，您可以通过调整代码来考虑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>

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

1 个答案: