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 use CSS transition effects

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    How to apply Title Case in input box through css

    How to draw a line with css and show text or image on it

    PHP databases - don't want to show javascript code

    How to hide text behind image

    How to get similar effect on menu

    How to style a GWT CaptionPanel?

    Table: how to change pictures on mouseover on single rows?

    How to set the color to the user's link color in CSS?

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    How could I center a div that is inside a div? Auto margins aren't working

    How do I strip a line of text or amount of words/characters from stored text with CSS/Javascript?

    Navigation Bar - Each button is at a seperate line, how do I fix that?

    CSS: how to put one image and one block with two

    in one line not using float

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery

    CSS: how to position element in lower right?

    How can I make a button change its position after being clicked?

    How should I approach the solution to develope a static, Responsive HTML file that seems to have functionality beyond CSS/HTML capabilities?

    How to slide in divs from off screen into absolute layout using CSS transitions?

    How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS

    How to parse xmlwebservice in phonegap

    jquery - how to change the display css attribute of a button within a li on hover

    How to align div blocks to be aligned in grid?

    How to align div in body to stay with specific height and width

    How to set jquery ui icon as background image per css?

    CSS Sub Menu shows up outside body

    How to select a .list-cell, in javaFX CSS

    how to edit input type data with CSS [duplicate]

    How to set position of checkbox to middle of td and input type text using css? [duplicate]