Apply overflow:auto on iframe's wrapper with CSS resize

Question

When I add overflow: auto on the parent element of the IFrame required by CSS resize: both, then iframe-resizer doesn't resize the IFrame but shows a scroll bar instead.

How should I solve this?

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

Add height to iframe:

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

Answer 2

Seem the issue was caused by utility class of bootstrap which use !important so by using normal CSS it works fine.

My code was:

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

By adding style overflow: auto without !important it work fine.

Height 100% or not it works.