通过CSS调整大小在iframe的包装上应用overflow:auto

Question

当我在 CSS

overflow: auto

所需的 IFrame 的父元素上添加

resize: both

时，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="https://iframe-resizer.com/"></iframe>
</div>

Answer 1

为 iframe 添加高度：

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

Answer 2

似乎问题是由 bootstrap 的实用程序类使用 !important 引起的，因此通过使用普通 CSS 可以正常工作。

我的代码是：

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

通过添加样式溢出：自动没有！重要它工作正常。

高度 100% 或不起作用。