Box doesn't overflow enough with flexbox

Question

I'm getting this weird issue with flex-box. See below. I should be able to scroll all the way up and all the way down (in order to see "Middle Top" and "Middle Bottom"). But I am unable to.

After further inspection, Firefox dev tools reveal that .wrapper has some minimum height. And setting min-height: 0 or height: 100% to .wrapper seems to fix the issue. I am wondering why this is? Why do I need to set a height or min height on .wrapper when .middle is set to overflow.

---

html,
body {
  height: 100%;
  margin: 0;
}

.flexi {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flexi>div {
  width: 100%
}

.top,
.bottom {
  flex-basis: 40px;
  min-height: 40px;
}

.top {
  background: red;
}

.middle {
  flex: 1;
  background: green;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.spacer {
  display: block;
  height: 1000px;
  width: 100px;
  background: purple;
}

.bottom {
  background: blue;
}

<div class="flexi">
  <div class="top">
    <span>Top</span>
  </div>
  <div class="middle">
    <div class="wrapper">
      <span>Middle Top</span>

      <span class="spacer"></span>
      <span>Middle Bottom</span>

    </div>

  </div>
  <div class="bottom">
    <span>Bottom</span>
  </div>
</div>

---

html,
body {
  height: 100%;
  margin: 0;
}

.flexi {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flexi>div {
  width: 100%
}

.top,
.bottom {
  flex-basis: 40px;
  min-height: 40px;
}

.top {
  background: red;
}

.middle {
  flex: 1;
  background: green;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
} 


.wrapper {
   min-height: 0; /* why? */
}

.spacer {
  display: block;
  height: 1000px;
  width: 100px;
  background: purple;
}

.bottom {
  background: blue;
}

<div class="flexi">
  <div class="top">
    <span>Top</span>
  </div>
  <div class="middle">
    <div class="wrapper">
      <span>Middle Top</span>

      <span class="spacer"></span>
      <span>Middle Bottom</span>

    </div>

  </div>
  <div class="bottom">
    <span>Bottom</span>
  </div>
</div>