Высота от родительского контейнера не соответствует содержанию в IE

Question

У меня есть некоторые DIVs, которые должны выглядеть следующим образом (и сделать в Chrome или IE11):

В IE10, однако, родительский контейнер, кажется, не по размеру сам с содержанием. Это выглядит очень некрасиво:

Я ожидаю, что что-то не так с «дисплея» -свойстве родительского DIV, но я не могу узнать, как решить эту проблему.

Соответствующая часть HTML:

.bigBlock { 
 
    border: solid 2px black; 
 
    border-bottom: 0px; 
 
    margin-top: 20px; 
 
    background: #ddd; 
 
    display: flex; 
 
} 
 
.bigBlockHeader { 
 
    width: 100%; 
 
    min-height: 30px; 
 
} 
 
.bigBlockTitle { 
 
    width: -moz-calc(100% - 310px); 
 
    width: -webkit-calc(100% - 310px); 
 
    width: calc(100% - 310px); 
 
    float: left; 
 
} 
 
.bigBlockTitle.cutOff { 
 
    margin-top: 5px; 
 
    margin-bottom: -5px; 
 
    font-weight: bold; 
 
    margin-left: 5px; 
 
} 
 
.bigBlockTitle.cutOff i { 
 
    margin-right: 5px; 
 
} 
 
.bbItemPause .cutOff { 
 
    text-align: center; 
 
} 
 
.bbRange { 
 
    width: 80px; 
 
    float: left; 
 
    overflow-x: hidden; 
 
    margin-left: 5px; 
 
    /*border-right: 1px solid black;*/ 
 
} 
 
.bbRange + .fa { 
 
    float: left; 
 
    margin-top: 3px; 
 
    margin-left: 5px; 
 
} 
 
.bigBlockBody { 
 
    margin-top: 0px; 
 
    border: solid 2px black; 
 
    border-top: 0px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.singleBlockElement { 
 
    width: 100%; 
 
    border-top: 1px solid lightgrey; 
 
    cursor: move; 
 
} 
 
.singleBlockElement:nth-of-type(odd) { 
 
    background-color: #f9f9f9; 
 
} 
 
.singleBlockElement i { 
 
    padding-top: 5px; 
 
} 
 
.singleBlockElement div { 
 
    height: 30px; 
 
    padding-top: 5px; 
 
} 
 
.singleBlockElement .cutOff { 
 
    width: calc(100% - 310px); 
 
    float: left; 
 
    margin-left: 5px; 
 
} 
 
.infoElement.infoplaceholder { 
 
    width: 100%; 
 
} 
 
.infoElement.infoplaceholder { 
 
    width: 100%; 
 
}

<div class="bigBlockContainer "> 
 
    <div class="bigBlock"> 
 
    <div class="bigBlockHeader noselect bbItemBlock"> 
 
     <div class="bbRange"> 
 
     <div class="bbRangeTime bbRangeFrom">08:00</div> 
 
     <div class="bbRangeTime bbRangeTo">18:00</div> 
 
     </div> 
 
     <div class="bigBlockTitle cutOff ng-binding"> 
 
     <i class="fa fa-minus-square-o"></i> 
 
     Mein Haus, mein Viertel, mein Block 
 
     </div> 
 

 
     <div class="edit"> 
 
     <a href="#">Block bearbeiten</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="bigBlockBody"> 
 

 
    <div class="singleBlockElement placeholder" draggable="false"> 
 
     <div class="bbRange">&nbsp;</div> 
 
     <i class="fa fa-info-circle infoicon"></i> 
 
     <div class="cutOff ng-binding"> 
 
     Fügen Sie neue Elemente hier mittels Drag&amp;drop ein 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="bigBlockContainer "> 
 
    <div class="bigBlock"> 
 
    <div class="bigBlockHeader noselect bbItemBlock"> 
 
     <div class="bbRange"> 
 
     <div class="bbRangeTime bbRangeFrom">08:00</div> 
 
     <div class="bbRangeTime bbRangeTo">18:00</div> 
 
     </div> 
 
     <div class="bigBlockTitle cutOff ng-binding"> 
 
     <i class="fa fa-minus-square-o"></i> 
 
     Mein Haus, mein Viertel, mein Block 
 
     </div> 
 

 
     <div class="edit"> 
 
     <a href="#">Block bearbeiten</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="bigBlockBody"> 
 

 
    <div class="singleBlockElement placeholder" draggable="false"> 
 
     <div class="bbRange">&nbsp;</div> 
 
     <i class="fa fa-info-circle infoicon"></i> 
 
     <div class="cutOff ng-binding"> 
 
     Fügen Sie neue Elemente hier mittels Drag&amp;drop ein 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="bigBlockContainer "> 
 
    <div class="bigBlock"> 
 
    <div class="bigBlockHeader noselect bbItemBlock"> 
 
     <div class="bbRange"> 
 
     <div class="bbRangeTime bbRangeFrom">08:00</div> 
 
     <div class="bbRangeTime bbRangeTo">18:00</div> 
 
     </div> 
 
     <div class="bigBlockTitle cutOff ng-binding"> 
 
     <i class="fa fa-minus-square-o"></i> 
 
     Mein Haus, mein Viertel, mein Block 
 
     </div> 
 

 
     <div class="edit"> 
 
     <a href="#">Block bearbeiten</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="bigBlockBody"> 
 

 
    <div class="singleBlockElement placeholder" draggable="false"> 
 
     <div class="bbRange">&nbsp;</div> 
 
     <i class="fa fa-info-circle infoicon"></i> 
 

 

 

 

 
     <div class="cutOff ng-binding"> 
 
     Fügen Sie neue Elemente hier mittels Drag&amp;drop ein 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Я сделал Plunkr: https://plnkr.co/edit/S6Zv0CvGujjTvCcz8fmJ

Answer 1

решаемые это: я должен был очистить плавающий, и самое главное: дать явные значения высоты для ребенка DIVs:

.bigBlockHeader { 
    height:50px; 
} 

singleBlockElement { 
    clear:both; 
    height:50px; 
}