CSS - Flexbox div match height of another div

Question

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

In the above code, I have two columns of the same width and 2 divs in each one. But the 4th div, where Test4<br>Test4 is written, is as a result higher than the others. How can I make the 2nd div's height to always match the 4th? Ty

score 1 · Answer 1 · answered Oct 18 '19 at 03:24

Just give height: 100%; to the second div using CSS.

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

score 0 · Answer 2 · answered Oct 18 '19 at 05:23

You can use flex-grow to take up the remaining whitespaces. In this case, both d2 will be of the same height. To answer you question either use flex-grow only on test 2 class or modify your structure so that test2 and test4 should part of the same parent.

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

CSS - Flexbox div match height of another div

2 Answers2