Why is flex-basis being ignored?

Question

In the following situation, why is the height of <header> reduced? As far as I can see, <header> should retain the height declared in by flex-basis and <div class="content-wrapper"> should take up the remaining space. This does work until it contains content that is taller than the space available to it. In this situation, <header> partially collapses.

 main {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   flex-direction: column;
 }
 header {
   flex-basis: 50px;
   background: red;
 }
 .content-wrapper {
   background: blue;
   flex: 2;
   overflow-y: auto;
 }
 .content {
   height: 1000px;
   background: green;
 }

<main>
  <header></header>
  <div class="content-wrapper">
    <div class="content"></div>
  </div>
</main>

If you run the snippet full-screen and change the height, the header height changes relative to the screen-height. I would expect it to remain fixed at 50px.

Answer 1

@Eric Martinez' comment is correct. To keep elements from shrinking, set flex-shrink to 0 instead.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 main {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   flex-direction: column;
 }
 header {
   height: 50px;
   flex-shrink: 0;
   background: red;
 }
 .content-wrapper {
   background: blue;
   flex: 2;
   overflow-y: auto;
 }
 .content {
   height: 1000px;
   background: green;
 }

<main>
  <header></header>
  <div class="content-wrapper">
    <div class="content"></div>
  </div>
</main>