Dynamically resize text to fill div

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.

I have made some images to help understand this problem:

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.

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.

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            #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;}
        </style>
    </head>

    <body>
        <div id="box1">
            Llorem ipsum foo bar baz
        </div>
        <div id="box2">
            Foobar
        </div>
    </body>
</html>

Is this problem even solvable with simple CSS or will I have to do some javascript/jQuery?