title: Dynamically adjust child and parent div height
body: <p>I have a website that is embedding another html file in it, it look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/ee6il.png" alt="Image of website"></p>
  
  <p>If I click on the the arrow, the inner webpage is expanded to show its contents like this:</p>
  
  <p><img src="https://i.stack.imgur.com/rAiiw.png" alt="Image of expanded element"></p>
  
  <p>The problem is, I get two scroll bars (an inner and the regular website scrollbar). I only want the outer scrollbar (the regular website scrollbar). So I want my parent and child div height to dynamically grow and I am having trouble figuring out how. I tried all the <code>overflow</code>properties. But I could have been setting them wrong. </p>
  
  <p>I am changing my inner div like so:</p>
  
  <pre><code>document.getElementById("versionsContent").innerHTML = '&lt;object class="versionsContent" type="text/html" data="TEST-iPhoneTGxD22SmokeTest.html" width="800px" style="float:left"/&gt;';
  </code></pre>
  
  <p>My HTML definition of this div is:</p>
  
  <pre><code>        &lt;div id="versionsContent" class="versionsContent"&gt;
              &lt;object class="versionsContent" type="text/html" data="TEST-iPhoneTGxD22SmokeTest.html" width="800px"/&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And my relevant CSS definitions are:</p>
  
  <pre><code>body
  {
   background-color: CCCCCC;
  }
  .versionsContent
  {
   font: 18pt Arial,Helvetica !important;
   font-weight: 30 !important;
   background-color: 444444 !important;
   overflow: hidden;
   min-height: 100%;
   text-align: center;
   align-content: center;
   padding: 35px !important;
   width: 95%;
   margin: 0 auto;
  }
  </code></pre>