Why does a vertical scrollbar appears in the parent of the iframe?

Question

I would like to create an iframe inside an element. The iframe should fill the whole element.

HTML code:

<div class="parent">
  <iframe class="child" src="https://example.com"></iframe>
</div>

Style definition:

.parent {
  background: red;
  width: 200px;
  height: 200px;
  overflow:auto;
}

.child {
  width:100%;
  height:100%;
  border: 0;

  margin: 0;
  padding: 0;
}

Unfortulately an unnecessary vertical scrollbar appears:

Jsfiddle: https://jsfiddle.net/4hqjt9w3/1/

How is it possible to get rid of the scrollbar on the parent element, without overflow: hidden, or absolute positioning?

Answer 1

Make the iframe a block element. By default its computed value of display is inline so you will face a whitespace issue at the bottom which will create the overflow:

.parent {
  background: red;
  width: 200px;
  height: 200px;
  overflow:auto;
}

.child {
  display:block;
  width:100%;
  height:100%;
  border: 0;
  
  margin: 0;
  padding: 0;
}

<div class="parent">
  <iframe class="child" src="https://example.com"></iframe>
</div>

Answer 2

Do you mean the scrolling attribute? Replace your code with the below.

<div class="parent">
  <iframe class="child" src="https://example.com" scrolling=no></iframe>
</div>