使柔性盒中的列高度取决于内容

Question

是否有方法使列高度取决于其中的内容。我目前使用的是flexbox，但是两列的高度相同，即内容最多的列的高度。我希望最小的列只能在其内容下降到最高点。

<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

的align-items初值为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>