title: Adding elements with javascript to DIV (height 100%) doesn't change the div's height?
body: <p>I have a DIV element with one more DIV inside as last elements of my website inside body. I would like to stretch it's height to 100% and give it some background color (works fine so far) but I have a button on website which adds a table to the inner DIV.</p>
  
  <p>Problem: when I keep adding a few of these tables they overflow from the div - div's colored background doesn't stretch with it's content (fiddle below demonstrates my problem, simply click on proceed a few times and you will see that the text goes out of the blue area but the blue area doesn't strech any further).</p>
  
  <p>Is there a way how to do this?</p>
  
  <p>Thank you very much.</p>
  
  <p>HTML code</p>
  
  <pre><code>&lt;div id="button"&gt;
  proceed
  &lt;/div&gt;
  &lt;div id="box"&gt;
    &lt;div id="results"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code</p>
  
  <pre><code>html, body {
    height: 100%;
  }
  
  #box {
    width: 100%;
    height: 100%;
    background-color: #3498eb;
  }
  
  #clearDiv {
    clear: both;
  }
  </code></pre>
  
  <p>Javascript code</p>
  
  <pre><code>var button = document.getElementById('button');
  button.addEventListener('click', function(event) {
      var results = document.getElementById('results');
  
    for (var i = 0; i &lt; 10; i++)
    {
      var table = document.createElement('table');
      var row = document.createElement('tr');
      var cell1 = document.createElement('td');
      var cell2 = document.createElement('td');
      results.appendChild(table);
      table.appendChild(row);
      row.appendChild(cell1);
      row.appendChild(cell2);
      cell1.innerHTML = 'test1';
      cell2.innerHTML = 'test2';
    }
  
    console.log('done');
  }, false);
  </code></pre>
  
  <p><a href="https://jsfiddle.net/0hoykhgk/6/" rel="nofollow">fiddle here</a></p>