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 do I put these on the same line?

    How to get rid of the spaces between CSS nav element borders?

    How to do letter spacing every two letters with CSS only?

    How do i make div go under another div making columns

    How automatically adjust div's width using CSS?

    How to keep nav menu highlighted after click using js in sidebar

    How to set jQuery draggable min/max-left and min/max-right

    Finding how many letter div fit

    how to make minified and readable css file in sublime text?

    How to hide autofill safari icon in input field

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails

    How to override css attribute-only style

    How can I get these two divs to appear close to each other vertically?

    How to style the div to triangle using CSS? [duplicate]

    how to overwrite global css to div tag which contains different html tags with different style

    How to add space between table cells `td`?

    How to build a submenu with CSS?

    How do I make my div scale to larger than it's original size using css animation?

    How can i draw a box using css like the answer box in stackoverflow?

    How to change the color of header?

    How to place a Show/Hide toggle button next to a header (not under the header)?

    How does Mozilla create this animated effect?

    How do I detect the user’s browser and apply a specific CSS file?

    Meteor: how to style useraccounts

    How to trigger div visibility when hovering over list item in CSS?

    How to define css selector class prefix with SASS

    How to get the “declared” CSS value, not the computed CSS value

    How can I write more efficient CSS for the max-width

    Parsing awful HTML: How do I recognize boundaries with xpath?

    CSS selector: how to style items [1-2][5-6][9-10] etc by pair