title: Dynamically resize text to fill div
body: <p>I have been searching for a solution to resize the text size in a div to make the text fill out the entire div height and width, with no avail.</p>
  
  <p>I have made some images to help understand this problem:
  <img src="https://i.stack.imgur.com/NDTGO.png" alt="Div 1"></p>
  
  <p>So this is a simple div with a height and width set. This height and width does not change, the text in the box does! So what I want to do is to make that text fill the whole width and height of the div just like in the image below.</p>
  
  <p><img src="https://i.stack.imgur.com/eRfHz.png" alt="Div 2"></p>
  
  <p>I have been working on the simple example below and I simply cannot find out how to do this. I have tried setting relative font-sizes with percentage, doing things with overflow, 
  text-aligning all not giving me the result I want.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;style type="text/css"&gt;
              #box1, #box2{ 
                  width: 400px;
                  height: 300px;
                  color: white; 
                  margin: 10;
                  font-size:larger;
                  text-align:justify;
                  letter-spacing: 100%;
              }
  
              #box1 { background-color: green;}
              #box2 { background-color: blue;}
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="box1"&gt;
              Llorem ipsum foo bar baz
          &lt;/div&gt;
          &lt;div id="box2"&gt;
              Foobar
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is this problem even solvable with simple CSS or will I have to do some javascript/jQuery?</p>