html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#root {
  display: inline-block; 
}

The inline-block ensures the wrapper shrinks to fit its contents instead of stretching to the viewport.

Step 2 — Measure and send size from the iframe

<script>
const root = () => document.getElementById("root");

function sendSize() {
  const el = root();
  if (!el) return;

  const rect = el.getBoundingClientRect();

  parent.postMessage(
    {
      iframeWidth: Math.ceil(rect.width),
      iframeHeight: Math.ceil(rect.height)
    },
    "*"
  );
}

window.addEventListener("load", () => {
  sendSize();

  const ro = new ResizeObserver(sendSize);
  ro.observe(root());
});
</script>

This code uses the postMessage() which sends and event to the parent document and javascript ResizeObserver Api to monitor any change to size.

• Measures the true rendered size of the content

• Sends it to the parent

• Automatically updates when the content changes (images load, text changes, layout shifts)

Step 3 — Listen and adjust iframe size in parent page

<iframe id="widgetFrame" src="child.html" style="border:0;"></iframe>

<script>
const iframe = document.getElementById("widgetFrame");

window.addEventListener("message", e => {
  if (!e.data) return;

  if (e.data.iframeWidth)
    iframe.style.width = e.data.iframeWidth + "px";

  if (e.data.iframeHeight)
    iframe.style.height = e.data.iframeHeight + "px";
});
</script>

This way the iframe will now perfectly match its content size.

As a Security note:

In production, never use "*" as the target origin. Always specify your real domain and verify it in the parent:

if (e.origin !== "https://your-iframe-site.com") return;

This prevents other sites from spoofing resize messages.