Div прокрутки без фиксированной высоты

Мне нужно создать прокручиваемый div с динамическим изменением размера.

Div должен динамически изменять размер, чтобы соответствовать экрану. Но если контент не умещается на экране, на нем должна отображаться полоса прокрутки. Итак, браузер ' собственная полоса прокрутки никогда не должна становиться активной.

Я могу получить полосу прокрутки, чтобы появиться в div, поместив внутри него другой div и используя overflow: auto .

<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
    <div id="gridcontent" style="height:100%">
    <!--Put loads of text in here-->
    </div>
</div>

Проблема в том, что это только работает, когда первый div имеет фиксированную высоту. Я надеялся, что могу просто установить для первого div значение height: 100% , но, к сожалению, нет - это свойство игнорируется, а полоса прокрутки просто не появляется.

Я попытался установить divs в таблице с height: 100% и установив для первого div значение height: auto , надеясь, что он сможет взять высоту от своего родителя. Но кажется, что div по-прежнему игнорирует свойство height.

Итак, мой вопрос: можно ли это сделать, используя только html, или - в противном случае - javascript?