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..

    CSS: How to change tooltip position to align to triggering element (rest of code working)

    Given an image button with borders how to stretch/repeat middle part in CSS for variable length content?

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

    How to set style class to another class depends on selector?

    how to change a css class onclick?

    CSS - how to trim text output?

    How to make a dynamic-height DIV [duplicate]

    How to recognise when it is appropriate to code CSS [closed]

    How to align multiple images in “li” on center

    How does the following line of JavaScript work?

    How to create directional two pointed arrow using css?

    Menu - Show up the Submenuitems under the whole Menuitems - HTML/CSS

    How to show a div behind navigation on rollover

    how to change glyph height without changing the font-size?

    How to set just a percentage of a color in CSS?

    How to get value of input using Jquery and put it in css of an element

    Avoid children to interfer with the parents hover. (or how to .stop(false,true) a css transition)

    How do I get the tooltip background to extend or grow as I input more text?

    how to properly align list items vertically?

    How can I select an nth element without knowing the element in CSS?

    How to strach div in some line to “all left space” with css

    How to give fadein effect to a div tag using CSS

    hovering over list item, only one item showing up instead of all

    How To Sync CSS Animations Across Multiple Elements?

    How to change a css element based on other element

    How to fix a 3x3 block of images with CSS

    How to change an input button with pure css button (no images)? [duplicate]

    how can i change the style of scroll bar

    How to include a non-standard font-face in azure?

    How can I edit CSS on an HTML tab?