Based on https://betterprogramming.pub/how-to-automatically-resize-an-iframe-7be6bfbb1214

Responsive iframe height (IE compatible)

# Parent code
<iframe
  id="iframe"
  src="child.html"
  allowtransparency="true"
	width="100%"
	type="text/html"
	frameborder="0"
	style="width: 100%; border: none"
></iframe>

<script nomodule>
  // IE
  window.onmessage = function (e) {
    if (e.data.hasOwnProperty('frameHeight')) {
      document.getElementById('iframe').style.height =
        e.data.frameHeight + 50 + 'px';
    }
  };
</script>
<!--[if !IE]>-->
<script>
  window.onmessage = (e) => {
    if (e.data.hasOwnProperty('frameHeight')) {
      document.getElementById('iframe').style.height = `${
        e.data.frameHeight + 30
      }px`;
    }
  };
</script>
<!--<![endif]-->

# Child (iframe)
<script nomodule>
// IE
let height;
function sendPostMessage() {
  if (height !== document.body.offsetHeight) {
    height = document.body.offsetHeight;
    window.parent.postMessage(
      {
        frameHeight: height,
      },
      '*'
    );
    console.log(height); // check the message is being sent correctly
  }
}
setTimeout(function () {
  window.onload = sendPostMessage();
  window.onresize = sendPostMessage();
}, 200);
</script>

<!--[if !IE]>-->
<script>
let height;
const sendPostMessage = () => {
  if (height !== document.body.offsetHeight) {
    height = document.body.offsetHeight;
    window.parent.postMessage(
      {
        frameHeight: height,
      },
      '*'
    );
    console.log(height); // check the message is being sent correctly
  }
};
window.onload = () => sendPostMessage();
window.onresize = () => sendPostMessage();
</script>
<!--<![endif]-->