CSS - Flexbox div匹配另一个div的高度[重复]答案

【问题标题】：CSS - Flexbox div match height of another div [duplicate]CSS - Flexbox div匹配另一个div的高度[重复]
【发布时间】：2020-02-15 00:20:44
【问题描述】：

.d1 {
  display: flex;
}

.d2 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.d3 {
  background-color: lightblue;
  margin: 5px;
}

<div class="d1">
  <div class="d2">
    <div class="d3">Test1</div>
    <div class="d3">Test2</div>
  </div>
  <div class="d2">
    <div class="d3">Test3</div>
    <div class="d3">Test4<br>Test4</div>
  </div>
</div>

在上面的代码中，我有两列宽度相同，每列有 2 个divs。但是第 4 个div 是写Test4<br>Test4 的地方，因此比其他的要高。如何使第二个div 的高度始终与第四个匹配？类型

【问题讨论】：

标签： html css flexbox

【解决方案1】：

只需使用 CSS 将 height: 100%; 分配给第二个 div。

.d1 {
  display: flex;
}

.d2 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.d3 {
  background-color: lightblue;
  margin: 5px;
}

.d1 .d2:first-child .d3:last-child {
  height: 100%;
}

<div class="d1">
  <div class="d2">
    <div class="d3">Test1</div>
    <div class="d3">Test2</div>
  </div>
  <div class="d2">
    <div class="d3">Test3</div>
    <div class="d3">Test4<br>Test4</div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用flex-grow 来占用剩余的空格。在这种情况下，d2 的高度相同。要回答您的问题，请仅在 test 2 类上使用 flex-grow 或修改您的结构，以便 test2 和 test4 应属于同一父级。

.d1 {
  display: flex;
}

.d2 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.d3 {
  background-color: lightblue;
  margin: 5px;
  flex-grow: 1;
}

<div class="d1">
  <div class="d2">
    <div class="d3">Test1</div>
    <div class="d3">Test2</div>
  </div>
  <div class="d2">
    <div class="d3">Test3</div>
    <div class="d3">Test4<br>Test4</div>
  </div>
</div>

【讨论】：