Edge doesn't stretch iframe in a flexbox

2019-04-06 22:22发布

站内问答 / HTML/CSS
385 2 4

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:

enter image description here

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

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

2条回答
别忘想泡老子
2楼-- · 2019-04-06 23:09

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/

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
3楼-- · 2019-04-06 23:14

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)