How to adapt height of an element to another in CSS
Tags: html,css,height
Problem :
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.
Solution :
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