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

score 4 · Answer 1 · answered Jul 09 '19 at 09:21

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>

I'm having the same problem but I can't just use `align-content: stretch;` because I need it centered, why is safari alone not considering the height and instead adding this 150px out of nowhere? — Gustavo Siqueira, Dec 10 '19 at 12:39

Flexbox setting wrong iframe height in Safari

1 Answers1