Hard to make this, any advices on debugging and devolping?

[Sokrates]

I am coding in Svelte and I am implementing a Widget component that I will embed in a studio where you're suppose to be able to customize the widget. In this studio this component is going to located, pretty much in the center of the screen like you would expect.

This widget is also available on a route /widget/[id] that is going to be embedded in an iframe in the lower right corner of the screen.
Upon clicking the widget, a popup is appearing slightly top left of the widget icon.

My current idea have been to have a fixed position on the iframe so I can place it in the lower right corner and have a absolute position on the component itself. However, no matter which heightCalculationMethod I use, iframe size does not expand to the size of the the popup content.

The widget layout is something like this.

<div class="absolute">

  <button class="absolute"> open popup</button>
  {#if showPopup}
    <div id="content" class="relative"/>
  {/if}
<div/>

I have this on my body

min-height: 100vh;
margin: 0;
background-attachment: fixed;

Could this cause any possible issues?

Update:
One issue I had was that it expanded but did not decrease in size. This was due to min-height: 100vh; on body.
Overall, it took me some time, had to have a div wrapping the content div that specified a height of the content that was going to be displayed.