应用溢出:在iframe的包装上自动调整CSS大小

Question

当我在CSS所需的overflow: auto父元素上添加IFrame时，iframe-resizer不会调整IFrame的大小，而是显示一个滚动条。

我该怎么解决这个问题？

​

iFrameResize({
  log: true,
});

div {
    resize: both;
    overflow: auto;
    max-width: 100%;
    min-width: 575px;
}

iframe {
  width: 100%;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js"></script>

<div>
<iframe src="http://davidjbradshaw.github.io/iframe-resizer/"></iframe>
</div>

​

Answer 1

向iframe增加高度：

iframe {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

Answer 2

这个问题似乎是由使用！重要的引导程序类引起的，所以通过使用普通的CSS，它工作得很好。

我的代码是：

<div class="overflow-auto">
  <iframe src="..."></iframe>
</div>

通过添加样式溢出: auto！重要的是，它工作得很好。

身高100%或不工作，它能工作。