Why does applying a top offset property to the last child, with a property of position: relative, cause the parent to generate a scrollbar? There is no fixed height for the parent that would otherwise generate the scrollbar.

<https://jsfiddle.net/gn3svh1w/>

HTML

```
<div class="wrap">
  <div class="child one"></div>
  <div class="child two"></div>
  <div class="child three"></div>
</div>

```

CSS

```
.wrap {
  width: 30%;
  min-height: auto;
  background: slategrey;
  overflow: auto;
}

.child {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 1rem;
}

.three {
  position: relative;
  top: 40px;
}

```