Flexbox 2划分不同的高度

Question

如何在if message.content.lower().startswith('add'): text_out = message.content.split()[1] 中使用

当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;的元素使用.flex：

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

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

Answer 2

将height:100%添加到绿框

.flex {
  display: flex;
}

.border {
  border: 2px solid black;
}

.bg-red {
  background: red;
}

.bg-green {
  background: green;
  height: 100%;
}

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