flexbox의 열 높이를 콘텐츠에 따라

Question

범위 내로 설정합니다. 거기에 내용의 높이를 높이는 방법이 있습니까? 나는 현재 flexbox를 사용하고 있지만 두 열의 높이가 같고 열의 높이가 가장 높습니다. 그 내용이있는 경우 가장 작은 열을 높이로 내려야합니다. align-items의

<div class="flex"> 
    <div class="col1"> 
    content 
    </div> 
    <div class="col2"> 
    content<br> 
    content<br> 
    content<br> 
    content<br> 
    </div> 
</div> 

.flex{ 
    display:flex; 
} 

Answer 1

초기 값은 stretch 그래서 모든 항목이 가장 높은 항목으로 높이가 동일하다. 모든 아이템의 높이를 내부의 내용과 같게하려면 flex-start을 사용할 수 있습니다.

.flex { 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 
.flex > div { 
 
    border: 1px solid black; 
 
}

<div class="flex"> 
 
    <div class="col1"> 
 
    content 
 
    </div> 
 
    <div class="col2"> 
 
    content 
 
    <br>content 
 
    <br>content 
 
    <br>content 
 
    <br> 
 
    </div> 
 
</div>