使flexbox中的列高度取决于其中的内容

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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;