height:100%与height:auto的使用场景

html为：

<div class="parent">
  <div class="child">
      <p class="title">title1</p>
      <p class="title">title2</p>
      <p class="title">title3</p>
  </div>
</div>

css:

.parent {
   width: 500px;
   height: 500px;
   background: #ccc;
}
.child {
   height: 100%;
}
.title {
   height: 200px;
   background: blue;
   margin: 0;
}

效果为：

当时要实现的效果为：这里不应该出现滚动条，只需要将height:100%改为height:auto就可以了。height:100%,意思是继承父亲的高度，这里为500px,所以出现了滚动条，height:auto为高度自然撑开，不会继承父亲的高度，所以也就不会出现滚动条。
实现效果为：