Почему iframe равного размера заставляет родительский div прокручиваться?

Question

Я просто хотел бы знать, почему iframe со 100% высотой и размером (согласно веб-инспектору), равным родительскому, вызывает появление полосы прокрутки.

Я нашел несколько вопросов по этой теме и хотя, похоже, обходные пути, но до сих пор я еще не видел никаких объяснений, почему это происходит.

Должно быть абсолютно ясно: Я не ищу решение. Мой вопрос: почему это случается. Кажется, что это согласовано в браузерах, которые я пробовал, поэтому я предполагаю, что есть веб-стандарты где-то, что объясняет это, казалось бы, странное поведение.

#content { 
 
    height: 90vh; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: lightblue; 
 
} 
 
iframe { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: none; 
 
}

<div id="content"> 
 
    <div class="wrapper"> 
 
    <iframe></iframe> 
 
    </div> 
 
</div>

Answer 1

Это не IFrame, который производит скроллбар, это пробел после

Если вы не хотите, чтобы увидеть его, используйте

* { line-height: 0; } 

If он не работает, попробуйте добавить

iframe { display: block; } 

тоже. Iframes отображаются как встроенные элементы по умолчанию (iframe = 'inline frame') и, следовательно, имеют высоту строки, которая вызывает проблему.