flexed div squeezes the height of other div in nested structure - html

Question

I am new to this forum. I encountered some issues when I was programming a file list display for my education portal.
Here are the codes (part of the whole page):
HTML
<div id = "mcMid">
<div id = "mcMidContainer" class = "tpWhite6">
<div id = "path">
Folder: ROOT
</div>
<div id = "top">
<div id = "name" class = "block1">Name</div>
<div id = "owner" class = "block2">Owner</div>
<div id = "date" class = "block3">Date</div>
<div id = "Delete" class = "block4">X</div>
</div>
<div id = "files">
<div id = "file1" class = "rollOverFBlueFile">
<div id = "name1" class = "block1">Determination of p value</div>
<div id = "owner1" class = "block2">Nguyen Chan</div>
<div id = "date1" class = "block3">2014-05-03</div>
<div id = "Delete1" class = "block4">X</div>
</div>
<div id = "file2" class = "rollOverFBlueFile">
<div id = "name2" class = "block1">Econ Module 1</div>
<div id = "owner2" class = "block2">Joyce</div>
<div id = "date2"class = "block3">2014-05-03</div>
<div id = "Delet2" class = "block4">X</div>
</div>
<?php for ($i=3;$i<$_GET['times'];$i++) { ?>
<div id = "file<?php echo $i; ?>" class = "rollOverFBlueFile">
<div id = "name<?php echo $i; ?>" class = "block1"">Econ Module 2</div>
<div id = "owner<?php echo $i; ?>" class = "block2">Joyce</div>
<div id = "date<?php echo $i; ?>" class = "block3">2014-05-03</div>
<div id = "Delet<?php echo $i; ?>" class = "block4">X</div>
</div>
<?php } ?>
</div>
</div>
</div>
CSS
#mcMid {
float:left;
display:flex;
flex:1;
flex-direction:column;
border-width:1px;
border-left-color:#666;
border-right-color:#666;
border-left-style:solid;
border-right-style:solid;
}
#mcMidContainer {
width:100%;
flex:1;
padding:0px 0px;
}
#path {
width:calc(100% - 20px);
height:auto;
padding:10px 10px;
background-color:#CCC;
}
#top {
width:100%;
height:auto;
padding:5px 0px;
background-color:#EEE;
font-size:12px;
overflow:auto;
}
#files {
width:100%;
flex:1;
overflow:auto;
}
.block1 {
width:calc(50% - 10px);
padding:5px 5px;
height:auto;
float:left;
}
.block2 {
width:calc(20% - 10px);
padding:5px 5px;
height:auto;
float:left;
}
.block3 {
width:calc(20% - 10px);
padding:5px 5px;
height:auto;
float:left;
}
.block4 {
width:5%;
padding:5px 0px;
height:auto;
float:left;
}
.rollOverFBlueFile {
background-color:#FFF;
border-width:1px;
border-bottom-style:solid;
border-color:#999;
width:100%;
height:auto;
padding:5px 0px;
font-size:12px;
overflow:auto;
}
.rollOverFBlueFile:hover {
background-color:#5BADFF;
}
.tpWhite6 {
background-color:rgba(255,255,255,0.5);
}
When this block of code is run with different values of the "times" variable, there were different results. The problem arises when I get the value of "times" to over a certain value when the div's inside start to exceed the allocated height of the "files" div. The "files" div start to stretch and squeezed the "top" and "path" div's.
Is there any other methods, other than fixing the height of "files", to stop this problem? Many thanks!! ^_^