Equal distribution of height across multiple Flex Columns

Question

We have the following problem:

It is about accommodating three boxes in a row, which should have the same height. In addition, the boxes each contain two parts: an introductory block and a detailed description.

If we now build the whole thing with Bootstrap 4, this is the structure:

/**
* CSS just for visualization
**/
.block-wrap {
  background: lightgrey;
  height: 50px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-4 block-wrap">
    <div>
      Intro text
    </div>
    <div>
      Detais text
    </div>
  </div>
  <div class="col-4 block-wrap">
    <div>
      Intro text
    </div>
    <div>
      Detais text
    </div>
  </div>
  <div class="col-4 block-wrap">
    <div>
      Intro text
    </div>
    <div>
      Detais text
    </div>
  </div>
</div>

We want the blocks (cols) to always have the same height - this means that the tallest block (based on the content) dictates the height of the others. We achieve this by setting the height of all blocks to 100 percent. It will look somewhat like this:

Now it gets tricky. While the blocks should always have the same height among themselves, the detail blocks should always start at the same height, like this:

Any idea how we can achieve this - it is important that the responsive behavior is retained and the blocks also make sense on mobile.

Edit:

I found a simple solution while stumbling across another problem - in hindsight I wonder why I didn't think of that right away, after all I've already worked with it. Thats how it works:

Bootstrap comes with a function to sort the columns. So in the end I just created a row with 6 columns. I then gave them a sorting on the different devices during the break.

I have recreated it again for you to illustrate:

Codepen fullscreen

"this means that the tallest block (based on the content) dictates the height of the others" - this is not possible in CSS flexbox. You will need to use CSS `grid` instead. — Dai, May 11 '22 at 08:52
If you want this alignment accross rows, use `grid` instead of `flex`. You are using the wrong tool for the job. — Dim Vai, May 11 '22 at 09:05

Soheb · Answer 1 · 2022-05-12T06:00:12.103

0

/**
* CSS just for visualization
**/
.row {
  display: flex;
 }
.block-wrap {
  background: lightgrey;
  flex: 1;
border: 1px solid;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-4 block-wrap">
    <div>
      Intro text
      Intro text
      Intro text
    </div>
    <div>
      Detais text
    </div>
  </div>
  <div class="col-4 block-wrap">
    <div>
      Intro text
    </div>
    <div>
      Detais text
    </div>
  </div>
  <div class="col-4 block-wrap">
    <div>
      Intro text
      Intro text
      Intro text
      Intro text
    </div>
    <div>
      <p>Detais text</p>
      <p>Detais text</p>
      <p>Detais text</p>
      <p>Detais text</p>
    </div>
  </div>
</div>

Please check the properties of flex that I have given to block-wrap. You have to give class to Intro Text as well if you want the height of that column to be same as well

edited May 12 '22 at 06:00

answered May 11 '22 at 09:03

Soheb

788
6
11

1

The question asks for the details to be aligned, when intros have DIFFERENT heights. In your example, all your intros have the same height! Please, demonstrate with different intros heights as the question suggests. – Dim Vai May 11 '22 at 09:09
Check now if that satisfy you. – Soheb May 11 '22 at 09:17
Now, do you see why your answer is not correct? If you look at the second picture in the question, the intros have different height, but the details start at the same postition (all aligned). – Dim Vai May 11 '22 at 17:01

score 0 · Answer 2 · answered May 11 '22 at 10:41

we can use table to do that. not sure if we can do that flex box or grid without using javascript

.container {
  border: 1px solid black;
  border-collapse: collapse;
}

.intro {
  background:lightblue;
}

.intro div{
  background:orange;
}

.details div{
  background:lightgreen;
}

.details {
  height:100px;
  
  background:lightblue;
}

table td {
  width: 1%;
  border: 1px solid black;
  padding:10px;
  vertical-align:top;
}
table td.details{
   vertical-align:bottom;
}



.ch-50 {
  height: 5em;
}
.ch-75 {
  height: 7.5rem;
}
.ch-100 {
  height: 10rem;
}

.ch-20 {
  height: 2rem;
}


table{width:100%;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<table class="container">
  <tr>
    <td class="intro ch-50">
      <div class="h-75"></div>
      </td>
     <td class="intro ch-75">
        <div class="h-100"></div>
      </td>
     <td class="intro ch-100">
         <div class="h-50"></div>
      </td>
  </tr>
   <td class="details">
      <div class="h-50"></div>
      </td>
   <td class="details">
      <div class="h-75"></div>
      </td>
   <td class="details">
     <div class="h-100"></div>
      </td>
  <tr>
    
  </tr>
  
</table>

Equal distribution of height across multiple Flex Columns

2 Answers2