homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Flex iframe doesn't stretch in IE11
Rain_Lover




msg:4664970
 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




msg:4665036
 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




msg:4665056
 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




msg:4665162
 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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved