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 Make CSS3 Columns Display Properly [closed]

    How to move a block of content to the right of another block without moving it in the DOM

    How can I make a two column layout's main div auto fit to browser width?

    How (and why) to use display: table-cell (CSS)

    ML - CSS How to align correctly a 'required' asterisk before la form label with the label text?

    How to make a smooth dashed border rotation animation like 'marching ants'

    how to make divs adjust to dynamic screen resolutions?

    How to right align text but still keep it indented to left?

    How to reuse footer with only HTML/CSS?

    save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory [duplicate]

    how to stop CSS animation without javascript

    How to get the effect not to add one more div?

    How to make the content of a span wrap onto the next line in an embedded

    How to implement ::ms-clear in CSS?

    How can I center three tables in a div?

    How to use px and % in the same layout like this

    How to change the mouse pointer?

    How can I manage css and php gd2 font size?

    How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

    How to give viewers custom CSS option

    How to reduce font size on a defined css style?

    How to make a span tag wider with an alphabet inside?

    How can i apply css stylesheet to single specific element?

    How to select lowest level ul in nested ul in Javascript/ css

    How to change the width of displayed text nested in a div?

    How Do I Add CSS Transition Effect to This

    Position relative, how to get rid of dead space?

    How to slowly move header while user scrolls the page?

    jQuery Mobile - How to change the css classes to be applied when i use a data-attribute?

    how to fire a jquery child function at the start of parent animation