Resizing iframe from JavaScript results high CLS

I have an iframe on my site that displays a list. At the bottom of the list there is a “See more” button, once the user presses it, the list will expand. The iframed site uses parent.postMessage to notify my site of the height changes:

parent.postMessage({"height": height}, targetOrigin);

On my site, I listen to this message and update the iframe’s height by code:

window.addEventListener("message", function (event) {
  if (event.data.height) {
    const iframe = document.getElementById("iframe");
    iframe.height = event.data.height;
  }
});

However clicking inside the iframe does not count as user interaction on the site, so by expanding the iframe from JavaScript it results as “unexpected layout shift” once the content below the iframe is pushed down.

I tried to delay the height change with setTimeout, and also added transition css rule to the iframe’s height, but still getting high CLS numbers. I also tried to add a button on the site and once the message arrives, I trigger a click event on it, and handle the resize from that, but it didn’t help at all.

I can ask the iframed site to modify their code, if necessary. Also the new height is dynamic, so I won’t know it until the message arrives.

How to solve the CLS issue, while having the resize in place?