Setting the height of a div container by only x amount of elements within it

I have the following div container:

<div id="the_container">
<input type="checkbox" name="item" /><br />
<input type="checkbox" name="item" /><br />
...
<input type="checkbox" name="item" /><br />
</div>

Let's say I have about 50 checkboxes in the above. I want to add a
scrollbar in the above so that its minimum height is 10 checkboxes.
How can I write a javascript to calculate the height of 10 checkboxes
so that the scrollbar will always show at least 10 checkboxes in any
browsers?
.

Relevant Pages