Edge 不会在 flexbox 中拉伸 iframe

Question

下面演示中的iframe是一个弹性项目：

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

<iframe></iframe>

但不包括弹性容器：

如果您将 iframe 替换为 div，它可以正常工作。

这是为什么？
解决问题的正确方法是什么？

Answer 1

Microsoft Edge 和 Chrome/Firefox 之间确实存在互操作问题。我会在回答这个问题后立即提交错误，并让团队进一步调查。

我的直接建议是在 <iframe> 周围添加一个 <div>，flex that <div>，然后设置 [= <iframe> 到 100% 的 width 和 height。 I set out to do this，当我注意到 Chrome 似乎不像 Firefox 和 Microsoft Edge 那样调整 iframe 的大小时。

我确实通过以下方法取得了成功：

<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%;
}

结果：http://jsfiddle.net/jonathansampson/o7bvefy1/

Answer 2

解决方法是将min-height: 100%;添加到iframe。

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

html,
body {
  height: 100%;
}

body {
  display: flex;
}

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

<iframe></iframe>

Edge 不会在 flexbox 中拉伸 iframe

Edge doesn't stretch iframe in a flexbox

html

css

iframe

flexbox

microsoft-edge