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

Question

我有一列3个div，我希望调整一列的高度以适应内容。

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

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

下面是我想：

而且我有：

Answer 1

从01取出元素，因此它不会在高度上增长。

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