フレックスボックス内の列の高さをコンテンツに依存させる

Question

そこにはコンテンツの列の高さを依存させる方法があります。私は現在フレックスボックスを使用していますが、両方の列の高さが同じで、列の高さが最も高くなっています。私は最小の柱がその内容ならば高さまでしか下がらないようにしたい。 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>