@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>

为Necro的帖子道歉，但是Google让我来这里是因为我的弹性基础问题被忽略了，这是因为与OP不同的原因，但这可能会帮助到那里的人。我试图使图像并排排列，大小相等，但一些不可 Package 的文本迫使一个框大于我设置的弹性基础，导致布局中断。
在我的例子中，修正是添加overflow-wrap: anywhere，这样文本就可以 Package 了，布局引擎可以强制flex项为父项宽度的25%。

.container {
  max-width: 20em;
  margin: 1em auto;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 1 25%;
  display: block;
  height: 4em;
  margin: 0;
  /* This will fix the 25% width problem: overflow-wrap: anywhere; */
}

.item.a { background-color: red; }
.item.b { background-color: green; }
.item.c { background-color: blue; }
.item.d { background-color: goldenrod; }

<div class="container">
  <div class="item a">
    <span>One fish two fish red fish blue fish.</span>
  </div>
  <div class="item b">
    <span>One fish two fish red fish blue fish.</span>
  </div>
  <div class="item c">
    <span>One fish twofishredfishblue fish.</span>
  </div>
  <div class="item d">
    <span>One fish two fish red fish blue fish.</span>
  </div>
</div>

<p>The 4 children have been told to be 25% the width of the flex container, but are not because one has unwrappable text content causing it to lay out too wide.</p>
<p>Uncommenting the overflow-wrap style to set it to 'anywhere' will allow that item to wrap its contents and obey the 25% rule.</p>

我实际上是用figcaption和gap规则在元素之间布局figure元素，这意味着简单的flex-basis: 25%不起作用，所以为了加分，这里使用calc()来设置每个元素的flex-basis，尽管不可否认这有点黑客，因为它涉及到知道子元素的数量和差距大小。

.container {
  max-width: 20em;
  margin: 1em auto;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* see flex-basis later */
}
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(25% - 3 * 10px);
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
}

.item.a { background-color: red; }
.item.b { background-color: green; }
.item.c { background-color: blue; }
.item.d { background-color: goldenrod; }

<div class="container">
  <div class="item a">
    <span>One fish two fish red fish blue fish.</span>
  </div>
  <div class="item b">
    <span>One fish two fish red fish blue fish.</span>
  </div>
  <div class="item c">
    <span>One fish twofishredfishblue fish.</span>
  </div>
  <div class="item d">
    <span>One fish two fish red fish blue fish.</span>
  </div>
</div>

<p>Since we know there are 3 gaps of 10px each, we can set the flex-basis to be `calc(25% - 3 * 10px)` which makes each item a little less than 25% the width of the parent to fit all 4 on one row nicely without wrapping.</p>