내용 및 최소 높이를 기준으로 한 플렉스 박스 높이

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>