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


    CSS Howto..

    How to detect which button is clicked in javascript?

    How to position nav element center under parent div?

    How can I override CSS id?

    How to center child divs along each side of a parent div

    CSS: How can I force a display: table-cell box to have a fixed width of 50%?

    how to keep my slider horizontally centered?

    how to configure .htc files to work on nginx

    CSS How to add a button below an image [closed]

    How to align both vertically and horizontally in CSS?

    How to create a DIV style switcher in JavaScript?

    CSS: How to center text over an image, both always centered and proportional regardless of window size

    How to change CSS of an element on hide/show of another element(without custom events)?

    How to center an image over another image in CSS

    How to vertically aligned to middle with bootstrap?

    How to manipulate the CSS at runtime

    How to find and delete specific row in blogger css with span tag?

    How to add checkmarks and x's when validating in angularjs?

    How to make this geometrical “translation” effect with javascript?

    How to modify only via CSS a color already defined in HTML?

    How to save user's choice of theme of web pages

    How to move div to top and remove?

    How do I use CSS to reposition this image?

    How do I center two divs within a larger div?

    How can I create a pop up like the one Google Calendar uses ?

    How to cover piece of border with element over it?

    How to only get the 'box-shadow-right' that cuts off when you reach a border?

    Displaying XML using CSS: How to handle  ?

    Show a caption with a semi-transparent color overlay when hovering over an image

    CSS (Fixed width right, fluid left, left is first in html) How do I keep left div from collapsing?

    how do I properly position & scale these elements in CSS?