Flexbox 2 divs different height [duplicate]

Question

How do I get this working in flexbox:

When the red box has more content than the green box (see my example) the green box should not get the same height as the red box but only what's needed.

.flex {
  display: flex;
}

.border {
  border: 2px solid black;
}

.bg-red {
  background: red;
}

.bg-green {
  background: green;
}

.p-2 {
  padding: 8px;
}

<div class="flex">
  <div class="bg-red border p-2">
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>

  </div>

  <div class="bg-green border p-2">
    <p>content-green</p>
  </div>
</div>

How do I get that working with flexbox?

Answer 1

Use align-items: flex-start; on the element of class .flex :

.flex {
  display: flex;
  align-items: flex-start;
}

We need to do this because the default value of align-items is stretch which make child elements take same height.