Css 基于内容和最小高度的Flexbox高度

我有一列3个div，我想调整一列的高度以适应它的内容

这是一把小提琴：

A

A

A
.栏目{
显示器：flex；
弯曲方向：立柱；
高度：500px；
证明内容：之间的空间；
}
.街区{
最小高度：50px；
背景：蓝色；
弹性：1；
}
.区块2{
背景：红色；
}

以下是我想要的：

我所拥有的：

---

从

.block2

元素中删除

flex:1

，使其不增加高度

.column{
显示器：flex；
弯曲方向：立柱；
高度：500px；
证明内容：之间的空间；
}
.block:不是（.block2）{
最小高度：50px；
背景：蓝色；
弹性：1；
}
.区块2{
背景：红色；
}

A

A

A

我离得太近了。。。非常感谢！：）

<div class="column">
  <div class="block"></div>
  <div class="block block2">
    <br /> A
    <br /> A
    <br /> A
  </div>
  <div class="block"></div>
</div>

<style>
  .column {
    display: flex;
    flex-direction: column;
    height: 500px;
    justify-content: space-between;
  }

  .block {
    min-height: 50px;
    background: blue;
    flex: 1;
  }

  .block2 {
    background: red;
  }

</style>