title: Scrollbars on overflow div do not appear when content is added to div using Javascript
body: <p>I have an HTML Document that looks a bit like this, only is far more complex and harder to control:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="title"&gt;This div does not do anything, just stays at the top.&lt;/div&gt;
    &lt;div id="container"&gt;
      &lt;div id="navigation"&gt;Some navigation&lt;/div&gt;
      &lt;div id="content"&gt;Most of the content&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Then I have a stylesheet that includes the following:</p>
  
  <pre><code>#container
  {  
     height: auto !important;
     overflow: visible !important;
     overflow-x: auto;
     overflow-y: scroll;
     position: relative;
     width: auto !important;
  }
  </code></pre>
  
  <p>This all works absolutely perfectly. The <code>title</code> section stays at the top of the page, the <code>container</code> div becomes scrollable if the content is long enough to need to scroll, otherwise it doesn't.</p>
  
  <p>The problem is, that I am then using Javascript to add a whole lot more stuff to the <code>content</code> div. This means that the <code>content</code> div is getting longer than the page <em>after</em> it has loaded and this seems to mean, in IE8 at least, that the scrollbars on the <code>container</code> never get activated, so once the Javascript added content falls off the bottom of the page it becomes inaccessible.</p>
  
  <p>It doesn't help that the minute I start tinkering with the IE developer tools, the scrollbars vanish altogether and I can't make them reappear, so it becomes somewhat hard to test.</p>