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 prevent this list from moving across the page?

    How to center align a glyphicon to the middle of the page at all screen sizes

    How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

    How can I set a height, or allow a div to extend to the height of absolutely position elements within?

    how to style in css: product…(price)?

    How to put a image below another?

    CSS / HTML: How to force horizontal scrollbar when table does not fit on screen?

    how to blur all list-items text except for (this) a:hover

    How to use css selector with class prefix by dojo?

    How to show scrollbar when the inner content is aligned to bottom?

    how to select a class which is children of many elements

    CSS Rotation and Styling - how to?

    How to include PHP code in CSS?

    how to remove a CSS property using jquery

    How to highlight selected tab in Web Forms including Master Page

    How do I combine this 2 sets of coding together to form a mega drop down nav

    CSS - Superfish, how to float 4th level of dropdown

    how to position two divs next to each other, one of them is centered in the container of both divs

    How to define a rectangular box for arbitrary contents in CSS/HTML?

    960 grid css : How do I change vertical padding between divs?

    how to get particular words with dotted lines in HTML and CSS?

    How to set body attribute in css using angularjs?

    How to make list items of one UL with fixed height be displayed as columns?

    How to use @RenderPage to include CSS content inline - MVC Razor

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    How to change css for different media without the page having to be refreshed

    How to move a div's border “up” one pixel with css

    how to improve this CSS layout which look like a table [closed]

    How does CSS resize images?

    How to change the content of a span using css hover?