Results 1 to 4 of 4

Thread: Flex iframe doesn't stretch in IE11

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    39
    Thanked 0 Times in 0 Posts

    Default Flex iframe doesn't stretch in IE11

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

    Code:
    <!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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    Code:
    iframe {
        background: tan;
        height: 100vh;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    39
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Code:
    iframe {
        background: tan;
        height: 100vh;
    }
    Thanks for the answer, but what if things get a little complicated like this:

    Code:
    <!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. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

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

    Code:
    <!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):

    Code:
    <!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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Resolved Flex Level Drop Down Menu (v1.1) Doesn't work on Apple
    By carricdesign in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-30-2011, 01:55 PM
  2. Flex level Doesn't allow another document ready statement
    By banaya in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-18-2010, 09:54 AM
  3. Flex Level Popup Menu doesn't work in Chrome?
    By dwt55305 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-19-2010, 04:09 PM
  4. Lytebox iframe doesn't work. Pls help!
    By thomasbrown in forum JavaScript
    Replies: 0
    Last Post: 01-28-2010, 04:13 PM
  5. Replies: 8
    Last Post: 10-11-2005, 12:16 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •