html - 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？

标签： htmlcssflexbox

Answer 1

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

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

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