Разделите html-страницу на две строки высотой 50%

Я хочу, чтобы html-страница была разделена на две строки по 50% каждая. Для этого я сделал два элемента div, обозначенных как row1 и row2, и установил их высоту :50% в css. В строке 1 есть еще 3 элемента div, а в строке 2 — еще 2 элемента div. Я хочу, чтобы, если эти внутренние элементы div достаточно велики, чтобы их можно было разместить на высоте 50, полосы прокрутки должны располагаться в соответствующих элементах div строк, но row1 и row2 должны оставаться, чтобы занимать только 50% экрана.

Содержимое моего HTML:

<div class="row" id="row1">
    <div class="dragbox" id="item1" >
        <h2 class="dragbox-h2">Handle 1</h2>
        <div class="dragbox-content" >
        Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl. 
  </div>
    </div>
    <div class="dragbox" id="item2" >
        <h2 class="dragbox-h2">Handle 2</h2>
        <div class="dragbox-content" >
            Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl. 
        </div>
    </div>
    <div class="dragbox" id="item3" >
        <h2 class="dragbox-h2">Handle 3</h2>
        <div class="dragbox-content" >
            Proin porttitor euismod condimentum. Integer suscipit nibh nec augue facilisis ut commodo nisi ornare. 
        </div>
    </div>
</div>
<div class="row" id="row2" >
    <div class="dragbox" id="item4" >
        <h2 class="dragbox-h2">Handle 4</h2>
        <div class="dragbox-content" >
            Nullam metus magna, tristique vel ultrices a, molestie quis dolor. Curabitur porta porta ullamcorper. 
        </div>
    </div>
    <div class="dragbox" id="item5" >
        <h2 class="dragbox-h2">Handle 5</h2>
        <div class="dragbox-content" >
            Nam rhoncus sodales libero, et facilisis nisi volutpat et. Nullam tellus eros, consequat eget tristique ultricies, rhoncus vitae magna. 
        </div>
    </div>
</div>

Фрагмент css:

.row{
height:50%;
background:#fff;
overflow-y:auto;
}

.row.dragbox{
margin:5px 2px  20px;
background:#fff;
border:1px solid #ddd;
}

Как я могу убедиться, что если содержимое внутреннего тега увеличится, то и div строки -будут придерживаться назначенной им высоты на 50%.

Спасибо.