div包含iframe和导航栏，仅更改导航栏的高度

Question

我有一个div，它的左侧包含一个可扩展的垂直菜单，而一个iframe的内容随右侧菜单的选择而变化。

问题是iframe中的内容非常大，但是iframe的高度只能达到菜单。如果我展开菜单，则div和iframe也将展开。

如何使div扩展到iframe需要的程度？

我尝试了似乎对其他人有用的js代码，但对我却无济于事：

function resizeIFrameToFitContent( iFrame ) {
    			iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    			iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
    		}
    
    	window.addEventListener('DOMContentLoaded', function(e) {
    
    	var iFrame = document.getElementsByTagName('iframe')[0];
    	resizeIFrameToFitContent( iFrame );
    		} );

<div class="row containerWraper">
           <div class="col-sm-3" id="navContainer">
    		<ul class="nav flex-column">
    			<li>
    			  <a class="nav-link" href="content/intro/resources.html" target="content">Intro</a>
    			</li>
    			<li>
    			  <a class="nav-link" href="#" data-toggle="collapse" data-target="#tab1">tab1</a>
    			  <ul class="nav flex-column, collapse" id="tab1">
    				<li class="nav-item">
    					<a href="content/subtab1.html" target="content">subtab1</a>
    				</li>
    				<li class="nav-item">
    					<a href="content/subtab2.html" target="content">subtab2</a>
    				</li>			
    			  </ul>
    			</li>
                            <li>
    			  <a class="nav-link" href="#" data-toggle="collapse" data-target="#tab2">tab2</a>
    			  <ul class="nav flex-column, collapse" id="tab2">
    				<li class="nav-item">
    					<a href="content/subtab3.html" target="content">subtab3</a>
    				</li>
    				<li class="nav-item">
    					<a href="content/subtab4.html" target="content">subtab4</a>
    				</li>		
    			  </ul>
    			</li>
            </div>
            <div class="col-sm-9" id="iframeContainer">
    		       <iframe src="content/resources.html" name="content"></iframe>
    	</div>
    </div>