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

Posted 2023-03-05

【中文标题】CSS - Flexbox div匹配另一个div的高度[重复]

【英文标题】：CSS - Flexbox div match height of another div [duplicate]

【发布时间】：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 的高度始终与第四个匹配？类型

【参考方案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>