'Equal distribution of height across multiple Flex Columns [duplicate]

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/[email protected]/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:

Target case

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:

Case

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

htmlcsstwitter-bootstrapbootstrap-4seabornbar-chart


Solution 1:[1]

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>

Solution 2:[2]

/**
* CSS just for visualization
**/
.row {
  display: flex;
 }
.block-wrap {
  background: lightgrey;
  flex: 1;
border: 1px solid;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rootShiv
Solution 2

Related Questions