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 a css media query snippet in ATOM editor

    How to split css shape in half vertically?

    How to add an image to xml sheet using css

    CSS: How to set container size equal to background image size

    css how to force to ul,ol to show numbers or disc, after reset the list style.?

    How can I include conversion from LESS to CSS in my ANT build file without including an extra Rhino .jar?

    How can I edit adjacent selector to a nested one

    How to make the side bar active?

    webkit animation play state: how to start/stop animation on demand with javascript

    How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

    How to set border around Twitter Bootstrap Icon?

    How to center nav using CSS/HTML? [closed]

    How to make half-square background in css

    how to make edges round in CSS?

    How to randomly pick colors and shapes from a for loop and display it in another div?

    How can I turn the page's font color to green when a button is clicked

    How can I align two different-size pieces of text to the left and right while matching baselines?

    How to apply jquery ui styling on dynamically generated elements

    How to correctly style drop-down menu

    How to attribute different ids to child elements depending on the number of parent-like elements in that container

    CSS - how to code for a specific resolution

    How to deal with different screen resolutions in CSS?

    How can I give a child element of one parent a higher z-index than another parent?

    How to center a paragraph of text on a particular word in HTML, CSS, or JavaScript?

    How do I create a class hierarcy in CSS for MVC4 Razor?

    How to disable
    tags inside
    by css?

    How to get a css stylesheet value that is not interpreted by the browswer?

    How does CSS handle specificity tie?

    How to perfectly center a “plus” sign in a circle using CSS

    CSS: How to align elements around a centered element?