我希望将 html 页面分成两行，每行 50%。为此，我制作了两个以 row1 和 row2 为特色的 div，并在 css 中设置了它们的 height:50%。第 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;
}
我如何确保如果内部标签的内容增加，那么 row-div 也会保持其 50% 的指定高度。
谢谢。