为什么 flex-basis 会被忽略？

Question

在以下情况下，为什么高度<header>减少了？据我所知，<header>应该保留在 by 中声明的高度flex-basis并<div class="content-wrapper">应该占用剩余空间。这确实有效，直到它包含比可用空间高的内容。在这种情况下，<header>部分崩溃。

 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>

如果您全屏运行代码段并更改高度，则标题高度相对于屏幕高度会发生变化。我希望它保持固定在 50px。

Answer 1

@Eric Martinez 的评论是正确的。要防止元素缩小，请flex-shrink改为设置为 0。
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>