Flex iframe doesn't stretch in IE11

HTML & CSS
1

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

Is it a bug?

2

It looks like a bug as the other browsers are displaying it ok.

You could give the iframe a height of 100vh if all you want is is to stretch from top to bottom.

3

That makes sense, 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>
4

Yes it seems as there is no solution to the more complicated scenarios. If absolute positioning worked within a flex container you could place the iframe at top and bottom to make it stretch.

IE11 will stretch the iframe if you give it a 100% height but that breaks chrome.

You could hack it like this if you don;t mind invalid hacks.


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Flex Iframe</title>
    <style>
				html,body{margin:0;padding:0;}
        body {
            display: flex;
            flex-direction: column;
            margin: 0;
            height: 100vh;
        }
        header {
            background: yellow;
        }
        main {
            display: flex;
            flex: 1;
        }
        span {
            background: green;
        }
        iframe {
            background: tan;
        }
								@media screen and (min-width:0\\0) {
    				iframe {	height:100%;box-sizing:border-box}
}

    </style>
</head>

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

Of course we don’t know what IE12 will do with it.:slight_smile:

5

Thanks for the solution, Paul! I played around with it and came up with this:

iframe {
            min-height:100%;
        }

Is it reliable? I wonder what you think.

6

Good catch, I didn’t think to try min-height.

As far as I can tell it should have no ill effect apart from the border adding to the height but you could offset that with the border box model or remove the default border.


<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Flex Iframe</title>
    <style>
html, body {
	margin:0;
	padding:0;
}
body {
	display: flex;
	flex-direction: column;
	margin: 0;
	height: 100vh;
}
header { background: yellow; }
main {
	display: flex;
	flex: 1;
}
span { background: green; }
iframe {
	background: tan;
	min-height:100%;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
</style>
    </head>

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

I don’t see that it should cause problems but you should probably run a few tests to see.

7

Thank you very much for the confirmation and snippets! :slight_smile: