Geek Answers Handbook

Edge doesn't stretch iframe in flexbox

iframe in the following demo is an element of flexibility:

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

But it does not cover the flex container:

enter image description here

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

  • Why is this?
  • What is the right approach to solve the problem?
+7
html css microsoft-edge flexbox iframe
source share
2 answers

There seems to be a connectivity issue between Microsoft Edge and Chrome / Firefox. I will write an error about this immediately after answering this question and continue the investigation of the team.

My immediate suggestion would be to add a <div> around <iframe> , flex, <div> , and then set the width and height from <iframe> to 100% . I decided to do this when I noticed that Chrome has no iframe size, such as Firefox and Microsoft Edge.

I found 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/

+5
source share

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

 * { margin: 0; border: 0; padding: 0; } html, body { height: 100%; } body { display: flex; } iframe { background: olive; flex: 1; min-height: 100%; } 
 <iframe></iframe>
+2
source share

More articles:


All Articles