父母有高度填充和孩子没有采用其高度？

Question

我遇到了这个问题

.item {
  width: 800px;
  background: #000;
  display: table;
}
.text {
  float: left;
  padding: 30px 0;
  width: 100px;
  background: #fff;
  word-wrap: break-word;
}
.box {
  width: 200px;
  float: right;
  height: 100%
}

<div class="item">
  <span class="text">
    Whatever Whatever Whatever Whatever Whatever Whatever Whatever Whatever 
    Whatever Whatever Whatever Whatever Whatever Whatever Whatever Whatever 
    Whatever Whatever Whatever Whatever Whatever Whatever
  </span>
  <div class="box">asdsadasdasdasdasdsadasdasca wdasdw</div>
</div>

该框与其父框的高度不同。

Answer 1

尝试删除

.box {
  float: right;
  height: 100%;
}

并添加

.box {
  display: table-cell;
  vertical-align: top;
}

.item {
  width: 800px;
  background: #000;
  display: table;
}
.text {
  float: left;
  padding: 30px 0;
  width: 100px;
  background: #fff;
  word-wrap: break-word;
}
.box {
  width: 200px;
  background: blue;
  display: table-cell;
  vertical-align: top;
}

<div class="item">
  <span class="text">
    Whatever Whatever Whatever Whatever Whatever Whatever Whatever Whatever 
    Whatever Whatever Whatever Whatever Whatever Whatever Whatever Whatever 
    Whatever Whatever Whatever Whatever Whatever Whatever
  </span>
  <div class="box">asdsadasdasdasdasdsadasdasca wdasdw</div>
</div>