настроить высоту содержимого html-страницы в соответствии с высотой iframe

Question

У меня есть html-страница, которую я передаю через фрейм на другую страницу.Iframe регулирует свою высоту в зависимости от высоты размера окна.Но содержимое внутри iframe не изменяется в соответствии с iframe.Как я могу сделать так, чтобы содержание html внутри iframe изменялось с высотой размера iframe в зависимости от высоты окна?

Вот мой HTML в моем Index.html:

<a class="desktopViewOnly" id="modalPopupDesktop" data-src="Int_Sim.html" data-fancybox data-type="iframe" href="javascript:;">
   <img src="images/images/device.png">
</a>

Вот CSS в моем Index.html:

.fancybox-slide--iframe .fancybox-content {
   width: 100vw!important;
   height: 100vh!important;
   max-width: 880px!important;
   max-height: 580px!important;
   margin: 0;
   border-radius: 50px;
}
.fancybox-error,
.fancybox-iframe {
   border-radius: 37px;
   max-width: 880px;
   max-height: 580px;
}

.fancybox-close-small {
   background: #000!important;
}

Вот JS для изменения размерав моем Int_Sim.html:

var $el = $(".simulator");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();
var $wrapper = $(".sim-container");

var starterData = {
    size: {
        width: $wrapper.width(),
        height: $wrapper.height()
    }
}

function doResize(event, ui) {

    var scale, origin;

    scale = Math.min(
        ui.size.width / elWidth,
        ui.size.height / elHeight
    );

    $el.css({
        transform: "scale(" + scale + ")"
    });
    console.log("doResize is working!");
}
doResize(null, starterData);

Я не уверен, почему этот JS не изменяет размер моего контента внутри iframe.