Flex iframe doesn't stretch in IE11

StackOverflow https://stackoverflow.com/questions/23216934

Question

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? What's a cross-browser solution?

Was it helpful?

Solution

That's easy:

iframe {
            min-height: 100%;
        }

DEMO

OTHER TIPS

From : Default width/height of an IFrame

Demo

"...I found the answer on the dev-tech-layout mailing list -- it's part of the CSS spec. The default ratio is 2:1..."

"...The default width of 300px is defined in the last paragraph of the CSS spec, section on the width of inline replaced elements..."

Otherwise, if 'width' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'width' becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.

"...The default height of 150px is defined in the last paragraph of the CSS spec, section on the height of inline replaced elements..."

Otherwise, if 'height' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'height' must be set to the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px, and has a width not greater than the device width.


You not given height to iframe so its taking the original height of iframe in IE try below

body {
    display: flex;
    margin: 0;
    height: 100vh;
}
span {
    background: green;
}
iframe {
    background: tan;
    height: 100vh; /* this is required to give it height in IE */
    border:0; /* toavoid vertical scroll */
}



Here it is

Demo

using the calc for height, modern browsers support calc

css

body {
    display: flex;
    margin: 0;
    height: calc(100vh - 50px);
    flex-direction: column;
}
span {
    background: green;
    height:calc(100vh - 50px);
}
iframe {
    background: tan;
    height: calc(100vh - 50px); /* this is required to give it height */
    border:0; /* to avoid vertical scroll */
}
header {
    background: yellow;
    height:50px;
}
main {
    display: flex;
    flex: 1;
}



Final Demo

Use of a some jquery to achieve the same


jQuery

// If you put your code at the bottom of the page to avoid needing`$(document).ready`, it gets even simpler:

$(window).on('resize', function () {
    var demoheight = $(window).height() - $('header').height();
    $("body, iframe, span").css("height", demoheight);
}).trigger('resize');



// Another way to do that same thing

// $(document).ready(myfunction);
// $(window).on('resize', myfunction);

// function myfunction() {
  //  var demoheight = $(window).height() - $('header').height();
  //  $("body, iframe, span").css("height", demoheight);
// }



// Another technique is to`.trigger()`one event inside the other:

// $(window).on('resize', function () {
   // var demoheight = $(window).height() - $('header').height();
   // $("body, iframe, span").css("height", demoheight);
// });
// $(document).ready(function () {
   // $(window).trigger('resize');
// });

CSS

body {
    display: flex;
    margin: 0;
    flex-direction: column;
}
span {
    background: green;
}
iframe {
    background: tan;
    border:0;
}
header {
    background: yellow;
}
main {
    display: flex;
    flex: 1;
}

Look this fiddle http://jsfiddle.net/grrenier/cm4f3/1/

You can use position fixed for the body and work with % for all elements. This is the code:

HTML:

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

CSS:

body {
    position:fixed;top:0;left:0;width:100%;height:100%;
    margin: 0;
}
header {
    background: yellow;
    width:100%;
    height:5%;
    float:left;
}
span {
    background: green;
    float:left;
    width:15%;
    height:95%;
}
iframe {
    background: tan;
    width:85%;
    height:95%;
    border:0;
}

You don't need to use <main> tag but if you use it you can use position fixed too.

This is another fiddle using <main> tag http://jsfiddle.net/grrenier/chT8F/

HTML:

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

CSS:

body {
    position:fixed;top:0;left:0;width:100%;height:100%;
    margin: 0;
}
header {
    background: yellow;
    width:100%;
    height:5%;
    float:left;
}
span {
    background: green;
    float:left;
    width:15%;
    height:100%;
}
iframe {
    background: tan;
    width:85%;
    height:100%;
    border:0;
    float:left;
}
main {float:left;height:95%;width:100%;}
  1. Add display: inline-block to the span
  2. Add a div around the iframe and make it display: flex
  3. Add flex-direction: column to the div
  4. Apply flex: 1 to the iframe.

Examples:

Simple

More complex

To have an iframe fill a parent.. works in chrome, ie and edge.

min-height:100%; is the key for ie. 

<td rowspan="9" style="position:relative;padding:0;width:270px;">
    <iframe class="readonly" style="position:absolute;width:100%;min-height:100%;top:0;bottom:0;right:0;left:0;" src="page.php"></iframe>
</td>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top