Column Flex，子 iframe 100% 高度，显示父滚动答案

【问题标题】：Column Flex,Child iframe 100% height,the parent scroll is shownColumn Flex，子 iframe 100% 高度，显示父滚动
【发布时间】：2020-12-27 14:15:37
【问题描述】：

在 div 中的 iframe 高度为 100%，父级显示 Y 滚动。为什么会溢出？

.root{
  position:absolute;
  height:100%;
  width:100%
}
iframe {
  pointer-events: all;
  width: 100%;
  height: 100%;
  border: 0;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-column root">
  <div style="background:yellow">
  Head
  </div>
  <div class="flex-grow-1 overflow-auto">
    <iframe frameborder="0" allowfullscreen src="https://www.portotheme.com/"></iframe>
  </div>
</div>

iframe 设置为 height:100%。为什么父级显示滚动？ JSFiddle.

【问题讨论】：

标签： css flexbox overflow

【解决方案1】：

将 overflow-y 属性添加到 root 类。即overflow-y: hidden;

.root{
  overflow-y: hidden;
}

HTML 的变化

<div class="d-flex flex-column root">
  <div style="background:yellow">
  Head
  </div>
  <div class="h-100">
    <iframe frameborder="0" allowfullscreen src="https://www.portotheme.com/"></iframe>
  </div>
</div>

`Codepen demo`

`JSFiddle demo`

【讨论】：