My body height fits the content inside with Javascript, and all my content is in separate iframes that can be exchanged by navigating. My Iframes have different heights, but when the height is lower, the body doesn't shrink to fit the content and remains the height from before if the content is bigger, leaving a gap. Is there any way to fix this?

body {
width:500px
height: fit-content
block-size: fit-content
    }
.myDiv {
background-color: lightblue; 
text-align: center;
border-radius: 20px;
max-width: 500px;
align-content: center;
margin: auto;
 }
iframe{
overflow:hidden
display:block;
width:100%;
border:0; 
  }

<div class="myDiv">
        <iframe src="1.html" name="one" width="300px" title="Iframe main" scrolling="no" ID="target"></iframe>
   
<a href="content1.html" target="one">01</a><br>
<a href="content2.html" target="one">02</a><br>
<a href="content3.html" target="one">03</a>
</div>

   <script>
        var div = document.getElementById("target");
        div.onload = function() {
        div.style.height =
        div.contentWindow.document.body.scrollHeight + 'px';
   }
    </script>