Diviser la page html en deux rangées de 50% de la hauteur

Je tiens à avoir la page html divisé en deux rangées de 50% chacun. Pour cela, j'ai fait deux divs avec comme row1 et row2 et de définir leur hauteur:50% en css.
Row1 a plus de 3 divs en elle et la ligne 2 a 2 plus de divs. Je veux que si ces intérieure divs sont assez grands pour être logés dans 50 hauteur que les barres de défilement doit venir dans leur rang respectif divs mais row1 et row2 doit rester à occuper 50% de l'écran.

Contenu de mon code HTML est:

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

Extrait de css:

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

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

Comment puis-je m'assurer que si le contenu de l'intérieur de la balise augmentation puis aussi ligne-divs en tenir à leur 50% affectés à la hauteur.

Grâce.

OriginalL'auteur Harshdeep | 2012-07-01