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 get the height of a div with overflow:auto property set in css

    how to make two functionality in one button.CSS BOOTSTRAP

    How to use CSS to place text on different sizes of images?

    How to stop css animation in current position on hover?

    Changing the color of the tomb. How do I do this?

    CSS - how to align text and an image vertically?

    How to define cellspacing in CSS

    WebPack how to put all css files into one css file

    How do I get my List Items to move up a Little in CSS

    How to center a div and keep the alignment to its nested floating divs?

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    How to test file size on rspec (Rails 4/rspec3)

    How to detect MAC OS' inverted color mode in javascript / css?

    how to make a left aligned navigation with dropdown elements

    How can I stay organized when writing CSS? [duplicate]

    How to stretch a background-image with css

    How to scale down CSS background-image when using various background-positions?

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How to inherit from ancestor and not parent in CSS?

    CSS: How to toggle switch action on the link?

    How to match all col height to row height in Bootstrap 3?

    Images not showing up in correct spot [closed]

    How to extend a div's width beyond its wrapper?

    How can I shift up a div and all divs that follow it?

    Is it possible to show webpage in a window from my Chrome extension, only using JS, HTML and CSS?

    How to change Kendo Excel Button Content Text

    How to apply multiple CSS3 rotation transformations (compounded) without javascript?

    How to align a picture,name and the post with css like facebook does?

    how to use first child in my code?

    how to put 2 css elements in the same row (one next to each other)?