Zmiana rozmiaru boxa w zależności od wielkości tekstu

Mam natępujący kod:

<div id="ie-test">
					<ul id="boxLinks" class="group">
						<li><a href="#box1">Tab 19</a>
						</li>
						<li><a href="#box2">Tab 20</a>
						</li>
						<li><a href="#box3">Tab 21</a>
						</li>
					</ul>
					<div id="box">
						<div id="box1" class="box">
							<ul>
								<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
								<li>Aliquam tincidunt mauris eu risus.</li>
								<li>Vestibulum auctor dapibus neque.</li>
							</ul>
						</div>
						<div id="box2" class="box">Another box!</div>
						<div id="box3" class="box">Woot!</div>
					</div>
				</div>

CSS:

 
#ie-test {
    position: relative;
    width: 100%;
}
.group:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
#box {
    border: 1px solid #CCCCCC;
    height: 250px;
    overflow: hidden;
    padding: 0 30px;
    position: relative;
    top: -1px;
}
#box1:target, #box2:target, #box3:target {
    display: block;
}
#boxLinks {
    list-style: none outside none;
    overflow: hidden;
}
#boxLinks li {
    display: inline;
}
#boxLinks li a {
    border: 1px solid #CCCCCC;
    color: black;
    display: block;
    float: left;
    left: 1px;
    margin-left: -1px;
    padding: 5px 10px;
    position: relative;
    text-decoration: none;
}
.box {
    display: block;
    height: 30px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

Jak zrobić żeby wysokość boxa zwiększała się propocjonalnie do wielkości tekstu?

Ja bym próbował z jQuery + na przykład to https://github.com/johnantoni/jquery.onfontresize

yyy
usunąć height: 30px z .box?