Flexbox 2 divs 不同的高度

Question

我如何让这个工作flexbox：

当 的red box内容比green box（参见我的示例） green box多时，不应获得与 相同的高度，red box而只是需要的高度。

.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>

我如何让它与 flexbox 一起工作？

Answer 1

align-items: flex-start;在 class 元素上使用.flex：

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

我们需要这样做是因为 align-items 的默认值是拉伸，这使得子元素具有相同的高度。