1

I have an issue with displaying iframe with display: flex in Chrome and Opera, it works as intended in Firefox and IE11.

The issue is iframe inside div with display: flex is not taking all height in browsers like chrome and opera. However Firefox and IE11 display it correctly.

Could you help me fix it, such that it displays correctly also in Chrome and Opera.

Thanks.

This is the output in Firefox(correct output). enter image description here

This is the output in Chrome and Opera. enter image description here

html,
body {
  width: 99%;
  height: 98%;
}

.flex {
  /* basic styling */
  width: 100%;
  height: 100%;
  border: 1px solid #555;
  font: 14px Arial;
  overflow: auto;
  /* flexbox setup */
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
}

.flex > div:nth-child(1) {
  background: #009246;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

.flex > div:nth-child(2) {
  background: #CE2B37;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 300px;
}

.flex > div:nth-child(2) iframe {
  width: 99.5%;
  height: 99%;
}
<body>
  <div class="flex">
    <div>test</div>
    <div>
      <iframe src="#"></iframe>
    </div>
  </div>
</body>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
rkrara
  • 442
  • 1
  • 6
  • 17
  • There are browser differences when it comes to rendering percentage heights in flexbox: http://stackoverflow.com/a/35537510/3597276 – Michael Benjamin Mar 09 '16 at 02:30
  • @Michael_B thanks for the info, do you know of any possible workaround. – rkrara Mar 09 '16 at 10:27
  • @rkrara Taken from the answer to the question Michael_B linked "for percentage height to work on an in-flow child, the parent must have a set height.". In your case a workaround of the problem would be to simply set a height for the iframes parent div. – Magnus Mar 09 '16 at 10:43

0 Answers0