flexed div在嵌套结构

Question

我是这个论坛的新手。我在编写教育门户网站的文件列表显示时遇到了一些问题。

以下是代码（整页的一部分）：

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);
}

当使用“times”变量的不同值运行此代码块时，会有不同的结果。当div的内部开始超过“files”div的分配高度时，我得到“times”的值超过某个值时出现问题。 “files”div开始拉伸并挤压“顶部”和“路径”div。

除了修复“文件”的高度之外，还有其他方法来阻止此问题吗？非常感谢！！ ^ _ ^