Flex iframe doesn't stretch in IE11

Forum Moderators: not2easy

Message Too Old, No Replies

Flex iframe doesn't stretch in IE11

Rain_Lover

10:37 am on Apr 22, 2014 (gmt 0)

The following iframe is a flex item and is supposed to stretch and fill the available space:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Flex Iframe</title>
  <style>
    body {
      display: flex;
      margin: 0;
      height: 100vh;
    }
    span {
      background: green;
    }
    iframe {
      background: tan;
    }
  </style>
</head>

<body>
  <span>Hello, world!</span>
  <iframe></iframe>
</body>

</html>

But in IE11 it doesn't look right.
DEMO: [jsfiddle.net ]

Is it a bug? What's a cross-browser solution?

rainborick

3:59 pm on Apr 22, 2014 (gmt 0)

I believe you need to set some explicit dimensions for the 'iframe' element. The defaults for many elements will differ across browsers. I added "height:100vh" in your jsfiddle and it looked like what I think you wanted.

Rain_Lover

6:16 pm on Apr 22, 2014 (gmt 0)

Thanks for the answer, but what if things get a little complicated like this:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Flex Iframe</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      margin: 0;
      height: 100vh;
    }
    header {
      background: yellow;
    }
    main {
      display: flex;
      flex: 1;
    }
    span {
      background: green;
    }
    iframe {
      background: tan;
    }
  </style>
</head>

<body>
  <header>Some text</header>
  <main>
    <span>Hello, world!</span>
    <iframe></iframe>
  </main>
</body>

</html>

rainborick

5:48 am on Apr 23, 2014 (gmt 0)

Okay, let me begin by saying I've never worked with flex. I was curious enough to play with your jsfiddle, but I know very little about this method. Still, I copied your latest code and when I ran it locally, adding the height:100vh; to the iframe's style, the result looked the same in Firefox, Chrome and IE11. So I made that much progress.

That said, I am unable to explain much of how this code renders. You've got a <span> that appears to be rendered as a block-level element and an iframe that has the same, seemingly arbitrary width in all browsers. In general, I'd avoid using an iframe as a major structural element just to save on sheetrock and aspirin. It all depends on what the 'src' is going to be, of course, but my slothful side would always prefer an 'include' of some kind so I don't have to either create a second complete stylesheet for an internal document or work around the stylesheet of an external document.

Could you share a bit about what your goals are here?