html - 为什么 flex-basis 被忽略了？

Question

下面这种情况，为什么高度是<header>减少？据我所知，<header>应保留 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>

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

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>