Why height: 100% inside flexbox works only if parent have flex-basis: 0?

Codepen here: https://codepen.io/Disorrder/pen/zYjGQLR?editors=1100

I discovered weird behavior with flexbox column, trying to make page layout. I have header, footer with flex-grow: 0 and main content block which have flex-grow: 1. Inside main block I want to expand a div by 100% of height. And I can't do it until main block's flex-basis: 0 (or any non-percentage value like 100px, doesn't matter) is not specified.

<div class="page">
  <header class="flex-item">Header</header>
  <div class="content flex-item">
    <div class="flex-item height-100">
      This block have height: 100% property
      <br>
      But this only works if parent have flex-basis: 0.
      <br>
      WHY?
      <br>
      Level 2: flex-basis: 0% won't work too! Why?
    </div>
  </div>
  <footer class="flex-item">Footer</footer>
</div>

* {
  box-sizing: border-box;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  
  line-height: 2em;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.page > header, .page > footer {
  flex: 0 auto;
}

.page > .content {
  flex: 1;
  flex-basis: 0; /* remove this line to see effect*/
  
  padding: 8px 16px;
  padding-bottom: 0;
}

.height-100 {
  height: 100%;
  border-color: #bed !important;
}

.flex-item {
  background: tomato;
  border: 3px solid rgba(0,0,0,.2);
}

.main-column {
  flex: 2 2 0;
}

.right-column {
  flex: 0 1 300px;
}

.right-content {
  max-width: 300px;
}

This is not really trouble, but I've spent a lot of time debugging, and still don't understand why it works in this way. Ideas?