为iframe父容器设置overflow:auto与resize:both后iframe-resizer失效的解决办法

方法一：修改父元素overflow样式（优先推荐） #

将父元素的overflow: auto改为overflow: hidden——resize: both属性仅要求overflow值不能为visible，hidden属于合法取值，这样既满足拖拽调整尺寸的需求，又能让iframe-resizer插件正常识别内容高度，父元素不会出现滚动条，而是随iframe高度自适应。

修改后的CSS代码：

div {
    resize: both;
    overflow: hidden; /* 替换原overflow: auto */
    max-width: 100%;
    min-width: 575px;
}

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

方法二：监听父元素resize事件，主动触发插件重计算 #

如果必须保留overflow: auto（比如需要父元素在内容超出时显示滚动条），可以通过监听父元素尺寸变化，主动调用插件的重计算逻辑：

1. 给父元素添加ID以便获取：

<div id="iframe-container">
<iframe src="https://iframe-resizer.com/"></iframe>
</div>

2. 修改JS代码，用ResizeObserver监听父元素尺寸变化并触发插件调整：

// 初始化插件并保存实例
const iframes = iFrameResize({
  log: true,
});

// 监听父容器尺寸变化
const container = document.getElementById('iframe-container');
const resizeObserver = new ResizeObserver(() => {
  // 触发所有iframe重新计算尺寸
  iframes.forEach(iframe => iframe.resize());
});

resizeObserver.observe(container);

这样用户拖拽调整父元素尺寸时，插件会重新计算iframe的适配高度，避免不必要的滚动条出现。

内容的提问来源于stack exchange，提问作者Zoroaster