来自父容器的高度不适合IE中的内容

Question

我有一些看起来像这样的DIV（在Chrome或IE11中也是如此）：

但是，在IE10中，父容器似乎没有内容的大小。它看起来很丑陋：

我希望父DIV的＆＃34;显示＆＃34; -property有问题，但我找不到如何解决这个问题。

HTML的相关部分：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我做了一个Plunkr： https://plnkr.co/edit/S6Zv0CvGujjTvCcz8fmJ

Answer 1

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

.bigBlockHeader {
  height:50px;
}

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