The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Flex iframe doesn't stretch in IE11
RainLover
post Apr 22 2014, 05:41 AM
Post #1


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 22 2014, 06:59 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
If you add width: 100%; to your iframe section won't that fix it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 22 2014, 08:08 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
I don't have an IE11, but this should work in older browsers:

CODE
html, body, iframe, span {
height: 100%;
margin: 0;
border: 0;
}

span {
    background: green;
    display: inline-block;
}
iframe {
    background: tan;
    vertical-align: top;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 22 2014, 01:29 PM
Post #4


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
QUOTE(CharlesEF @ Apr 22 2014, 06:59 AM) *

If you add width: 100%; to your iframe section won't that fix it?


You mean height:100%;?
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 22 2014, 01:35 PM
Post #5


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
QUOTE(Christian J @ Apr 22 2014, 08:08 AM) *

I don't have an IE11, but this should work in older browsers:


Thanks for the answer, but I'm looking for a solution in IE11. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 22 2014, 03:38 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(RainLover @ Apr 22 2014, 08:35 PM) *

QUOTE(Christian J @ Apr 22 2014, 08:08 AM) *

I don't have an IE11, but this should work in older browsers:


Thanks for the answer, but I'm looking for a solution in IE11. smile.gif

It should work in IE11 too. tongue.gif

My guess is that IE11 is buggy, but since I don't have it I can't check. Also I'm not familiar with Flex layouts. How does your original example deviate in IE11?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 22 2014, 04:08 PM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
FYI, display flex and flex-direction column are supported in IE 10+, so that shouldn't be the issue here.
See http://css-tricks.com/almanac/properties/d/display/ and http://css-tricks.com/snippets/css/a-guide-to-flexbox/ .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Apr 22 2014, 08:58 PM
Post #8


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
QUOTE(Christian J @ Apr 22 2014, 03:38 PM) *


How does your original example deviate in IE11?


It doesn't stretch to fill the container.

This post has been edited by RainLover: Apr 22 2014, 08:59 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 07:28 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC