我知道这是一个老问题，但更好的解决方案是使用flex-start将flex项设置为与顶部对齐。

/* Default Styles */
.container {
  display: flex;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
 .flexbox-1 {
  flex: 1;  
  align-self: flex-start;  
  border: solid 3px red;
}

<div class="container">
  <div class="flexbox-1">"align-self: flex-start;"</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

**这是一个旧的解决方案。**我的答案被这个new answer by Aaron using align-self取代。这是一个更好的解决方案，不依赖于CSS的怪癖。

只要flex容器本身没有高度，就可以在第一个flex项上设置height: 0%。因为它没有高度可以从其父代继承，任何 * 百分比 * 高度都会导致它崩溃。然后，它将与其内容一起增长。

示例

在这个例子中，我删除了-webkit前缀。只有Safari才真正需要它，并且前缀可以添加到无前缀版本的 * 上面 *。我还删除了flex-direction: row，因为它是默认值。

.container {
  display: flex;
}
.flexbox-1 {
  flex: 1;  
  height: 0%;  
  border: solid 3px red;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

你可以很容易地通过添加到父align-items来解决这个问题：灵活启动;
就这些

将子对象的height设置为max-content将防止它们缩小。

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
  height: max-content;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

另一个选项是利用“col”元素和自动宽度特征，当flexbox方向是列时，其用作自动高度特征。这里有一个bootstrap 5的例子

<div class="d-flex flex-column">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
</div>

参考：https://getbootstrap.com/docs/5.0/layout/grid/#equal-width

我想评论@misterManSam的回答，但我没有足够的声誉。
它工作得很好，但我在Vercel上遇到了一些麻烦（也许，我在另一个版本中使用了node-sass），设置

height: 0%;

我推荐

height: 100%;

答案是一样的，但它在任何地方都有效。