Flexbox 2 divs不同的高度[重复]答案

【问题标题】：Flexbox 2 divs different height [duplicate]Flexbox 2 divs不同的高度[重复]
【发布时间】：2018-10-22 16:50:53
【问题描述】：

如何在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？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

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

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

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

【讨论】：

哇，谢谢，但这是为什么呢？
@Jenssen 因为 align-items 的默认值是stretch
w3schools.com/cssref/css3_pr_align-items.asp
@Jenssen 如果对您有用，请为答案投票：)
最好在答案中添加对为什么的解释

【解决方案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>

【讨论】：

谢谢，两个都工作！
@Jenssen 我不同意这个解决方案，因为通过添加 height:100% 你会创建另一个问题，因此高度将是自动的并且你有需要的结果......对你来说是逻辑吗添加 height:100% 会降低高度吗？
@Zuber 检查这个：caniuse.com/#search=min-content
已经检查过@TemaniAfif
@Zuber 所以我猜你注意到它只适用于 chrome ;)