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

Question

我有一个包含3个div的列，我希望将一个列的高度调整到它的内容。

这是一个小提琴：https://jsfiddle.net/9w488bo7/1/

int weight;
Int32.TryParse(weightTxt.Text,out weight);
int height;
Int32.TryParse(heightTxt.Text,out height);

这就是我想要的：

我拥有的东西：

Answer 1

从flex: 1元素移除.block2，使其不会增加高度。

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

.block:not(.block2) {
  min-height: 50px;
  background: blue;
  flex: 1;
}

.block2 {
  background: red;
}

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