Flex iframe doesn't stretch in IE11 [Archive]

Rain Lover

04-22-2014, 10:42 AM

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 (http://jsfiddle.net/Mori/Fm8C3/)

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

jscheuer1

04-22-2014, 12:53 PM

iframe {
background: tan;
height: 100vh;
}

Rain Lover

04-22-2014, 06:25 PM

iframe {
background: tan;
height: 100vh;
}

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>

jscheuer1

04-23-2014, 02:55 AM

This is getting pretty hypothetical. It's undeniable that IE 11 acts differently. Here's one way of dealing with the situation:

<!DOCTYPE html>
<html>

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

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

</html>

But it could depend upon what's in the iframe and/or other elements on the page. That might dictate that some other solution be sought.

I'd never heard of vh before this. So I did a little bit of reading on it. How these things were handled before it was available was usually by using javascript. So, if the above isn't suitable, perhaps a javascript workaround could be used.

It's also worth noting that the iframe element was almost dropped at one point. As a result it's one of the least standard elements that one could use. Just playing with it now, if you use an object, it works - but only if there's a data attribute with content (I only tried HTML content, there might be limits on other sorts, as to whether they would be as effective as HTML at allowing IE 11 to behave well with this):

<!DOCTYPE html>
<html>

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

<body>
<header>Some text</header>
<main>
<span>Hello, world!</span>
<object data="12345.htm"></object>
</main>
</body>

</html>

12345.htm:

12345

I tried the same thing (using 12345.htm as the src for the iframe) and that did not work.