Edge doesn't stretch iframe in a flexbox

问题

The iframe in the following demo is a flex item:

* {
  margin: 0;
  border: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
}
iframe {
  background: olive;
  flex: 1;
}

<iframe></iframe>

But it doesn't cover the flex container:

If you replace iframe with a div, it works with no problem.

Why is that?
What's the right approach to resolve the issue?

回答1:

There does appear to be an interop issue between Microsoft Edge, and Chrome/Firefox. I'll file a bug on this immediately after answering this question, and have the team investigate further.

My immediate suggestion would be to add a <div> around the <iframe>, flex that <div>, and then set the width and height of the <iframe> to 100%. I set out to do this, when I noticed Chrome appears to not size the iframe like Firefox and Microsoft Edge do.

I did find success with the following approach:

<body>
    <div>
        <iframe src="http://bing.com"></iframe>
    </div>
    <div>
        <p>Flex item number 2</p>
    </div>
</body>

html, body, div, iframe {
  border: 0; padding: 0; margin: 0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
}

div {
  flex: 1;
  position: relative;
}

iframe {
  position: absolute;
  width: 100%; height: 100%;
}

Results: http://jsfiddle.net/jonathansampson/o7bvefy1/

回答2:

The solution is to add min-height: 100%; to the iframe.

* {
  margin: 0;
  border: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
}

iframe {
  background: olive;
  flex: 1;
  min-height: 100%;
}

<iframe></iframe>

来源：https://stackoverflow.com/questions/34095170/edge-doesnt-stretch-iframe-in-a-flexbox

标签

html

css

iframe

flexbox

microsoft-edge