コンテンツと最小高さに基づくフレックスボックスの高さ

Question

私は3divの列を持っています。その列の高さを内容に合わせて調整したいと思います。 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からflex: 1を削除します要素なので、高さが増えません。

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