Divide the html page into two lines with a height of 50%

I want the html page to be split into two lines of 50% each. To do this, I made two divs, shown as row1 and row2, and set their height: 50% in css. There are 3 more divs in Row1, and 2 more divs in line 2. I want these inner divs to be big enough to fit at 50 heights than the scrollbars should appear in their respective div divs, but row1 and row2 should only remain at 50% of the screen.

My HTML content:

<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>

Snippet css:

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

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

How can I make sure that if the contents of the inner tag are incremented, then also row-divs adhere to 50% of the assigned height.

Thank.