css元素的高度怎么自动扩充到100%

<style type="text/css">
<!-- display: table-cell-->
.a,
.b {
  width: 50%;
  color: white;
}
.a {
  background-color: olive;
}
.b {
  background-color: blue;
}
.box {
  border: 1px solid red;
  display: table;
  width: 100%
}
.a,
.b {
  display: table-cell;
  vertical-align: top;
  color: white;
}
</style>

<div class="box">
  <div class="a">css元素的高度怎么自动扩充到100%</div>
  <div class="b">
    <p>css元素的高度怎么自动扩充到100%</p>
    <p>css元素的高度怎么自动扩充到100%</p>
  </div>
</div>

<!-- flex -->
<style type="text/css">
.a,
.b {
  width: 50%;
  color: white;
}
.a {
  background-color: olive;
}
.b {
  background-color: blue;
}
.box {
  border: 1px solid red;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  display: -ms-flexbox;
  -ms-flex-flow: row wrap;
}
</style>

<div class="box">
  <div class="a">css元素的高度怎么自动扩充到100%</div>
  <div class="b">
    <p>css元素的高度怎么自动扩充到100%</p>
    <p>css元素的高度怎么自动扩充到100%</p>

  </div>
</div>