Question

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

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

<iframe></iframe>

但它不包括flex容器：

如果您将iframe替换为div，则可以正常使用。

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

Answer 1

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

我的直接建议是在<div>， <{em> <iframe>附近添加<div>，然后设置width和{ height至<iframe>的{1}}。 I set out to do this，当我发现Chrome似乎没有像Firefox和Microsoft Edge那样调整iframe的大小。

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

100%

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

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

Answer 2

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

＆＃13;

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

＆＃13;

<iframe></iframe>

＆＃13;

Edge不会在flexbox中拉伸iframe

2 个答案: