Florian.C Florian.C - 28 days ago 11
CSS Question

How to adapt height of an element to another in CSS

I have the following HTML code

<div class="row info_container">
<div class="col-md-4 info_box">
<p class="info_text"><img src=""/>Some text</p>
</div>
<div class="col-md-4 info_box">
<p class="info_text"><img src=""/>Some text</p>
</div>
<div class="col-md-4 info_box">
<p class="info_text"><img src=""/>Some longer text</p>
</div>
</div>


Where there are 3 div, each containing an image and some text. In one of the div, the text is longer so there are 2 lines of text instead of one, resulting in a higher div.

Is there a css way to tell all the div to get the height of the bigger one ? I tried searching on google and here but couldn't find an answer without JS...

Edit : tried following css :

.info_container {
display: flex;
align-items: stretch;
}


But it didn't work. Also tried removing the align-items property, and instead adding flex-grow:1 inside .info_box, didn't work either...

Edit 2 : aaaaand I found the mistake, it was the following line of code

.info_box{
height: 100%;
}


that was in my CSS. So, I can confirm that just adding display:flex to the container works.

Answer

CSS Flex is your friend mate. Just add display: flex to the container like this:

.info_container {
  display: flex;
}

Everything else should just fall into place :)

Karen Manenez has a handy pen that will explain it nicely here