html - 父容器的高度不适合 IE 中的内容

Question

我有一些看起来像这样的 DIV(在 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

解决了这个问题:我必须清除 float ，最重要的是:为子 DIV 提供明确的高度值:

.bigBlockHeader {
  height:50px;
}

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