make column height in flexbox dependant of content within

Question

IS there a way to make a column height dependant of the content within it. I am currently using flexbox but both columns have the same height, the height of the column with the most content. I want the smallest column to only go down to the height if its content.

<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

Initial value of align-items is stretch so all items have same height as tallest item. To make all items height same as its content inside you can use 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>