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 can I animate my div to go from top to bottom whithout interfering with the content inside?

    I have 3 divs in one row, how do I get the middle div to stay an exact width while the left and right div shrink in as the screen resizes smaller?

    How to vertically center text next to a radio button

    How to draw a guitar string using css?

    How to make a css 'snail'?

    How to understand CSS Background-Position coordinates

    How to put css class in to html:select element in jsp

    How Do I make this JQuery window have a minimum size?

    CSS Fixed width right, fluid left, right div is first in html. How do I keep left from collapsing

    How to stop breaking tables border when page is spliting?

    How to set 2 images to be by the side of each other

    HOW DO I MOVE THIS DIV UP TO BE ALLIGNED WITH THE FORM BOX [closed]

    How to make a button with image inside?

    How to design a CSS for a centered floating confirm dialog?

    How do i put an X on the right side of a block?

    how to set a radio button state to checked with css?

    How do I combine two columns with different formatting?

    Bootstrap: how to clear images in a gallery?

    How to make an element remain inline

    How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?

    How to make a responsive div stick to page edge

    how to route arrow from right to down css

    How to apply css in react component when using ES6?

    How do I prevent a link tag from adding extra padding below an image?

    How do I apply padding or a margin to this heading displayed as a table-cell?

    How to write persistent CSS box rules?

    python how to parse css file as key value [closed]

    How can I fix the footer to dynamically change with height of the grid sections as they increase?

    How can I align a group text with seperate Widgets

    How to center icons in div consistently? [duplicate]