title: How can I dynamically change the height of a div to match the size of the div containing it
body: <p>I got div1 and div2 with div2 containing div1 (and some other elements). I want to dynamically  change the height of div1 to match the height of div2(- the height of the other elements) whenever div1 exceeds that height. The reason I don't just set div1's height outright is because div2's size isn't fixed and I want the horizontal scroll bar from div1 to stick to the bottom of its content and not to the bottom of div2.</p>
  
  <p>I don't have any code to show since it's just two divs.</p>
  
  <p>If it helps, div1 will contain a table.</p>
  
  <p>Here's what I got so far: </p>
  
  <pre><code>if(document.getElementById("div1").offsetHeight &gt; document.getElementById("div2").offsetHeight) {       
      document.getElementById("div1").style.height = document.getElementById("div1").parentNode.offsetHeight+"px";
      document.getElementById("div1").style.overflowY = "scroll";                             
  }
  </code></pre>
  
  <p>This works for setting the overflow but I can't get it to actually change the height of div1</p>
  
  <p>Here's the working version: </p>
  
  <pre><code>document.getElementById("div1").style.height = '';
  document.getElementById("div1").style.overflowY = "";   
  if(document.getElementById("div1").offsetHeight &gt; document.getElementById("div2").offsetHeight) {   
      var height = document.getElementById("div2").offsetHeight - document.getElementById("other_data").offsetHeight;
      document.getElementById("div1").style.height = parseInt(height)+"px";
      document.getElementById("div1").style.overflowY = "scroll";                             
  }
  </code></pre>
  
  <p>for those who might be having the same problem.</p>