Iframe doesn't fit parent element

[Mori]

The iframe doesn’t fit the div’s height:

CSS

div {
  height: 100px;
  background: tan;
}

HTML

<div>
  <iframe></iframe>
</div>

DEMO

1. Why does it happen?
2. What are my options to solve the problem?

[ralphm]

Check out the solution discussed here: https://www.sitepoint.com/css-aspect-ratio/#responsiveyoutubevideos

It relates to YouTube videos, but it’s still just talking about how to fit an iframe into a div.

[snadyleiby]

for your particular…

HTML

<div>
  <iframe></iframe>
</div>

…this…
CSS

div {
  height: 100px;
  background: tan;
}
iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

…achieves your desired result.

Of course the contents of the iframe may require
adjustments to the CSS for any overflow