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

    Webpage Css Error.. Not Showing Anything

    How to center a div tag in a html page without being affected by zooming

    How to hide `
  • ` drop down menu in Nav bar in Desktop view?
  • How to use existing SVG symbols (in a file) as markers in highcharts?

    How can i Convert left vertical menu to right?

    How to set margin left and right to the center div when using float:left

    How to transform a button into this styled button

    How to scale down retina image sprite with css

    How to create a two column layout

    How to increase padding in jQuery Columnizer, with fixed number of columns, without kicking the last column down to the next “row”

    How to add JS and CSS to all content parts in an Orchard module

    How to make image 3D using CSS

    How to set a External SVG color in HTML using CSS?

    How to remove “padding” from ionic card

    How to set a div within text?

    How to remove gap between elements when using CSS3 table-row/header/footer-group in Firefox?

    how to display navigationMenu div left side of the slider

    How to create a fixed div inside an another div?

    How to? CSS “Position:Absolute” constant Margin-Top? Possible?

    How to get odd/even coloring for IE and Firefox using CSS alone?

    How to reset CSS3 *-transform: translate(…)?

    how to make a child div visible when clicking its parent div in pure css

    How to change property of a specific CSS pseudo element?

    How to Decrease Image Brightness in CSS

    How to create invoice / money reciept with html [closed]

    How can i refer to all of my tags in CSS?

    CSS selector: how to make 2 spans each fill 50% of their parent's width?

    How to draw with CSS canvas a slideshow frame?

    How to overlap a CSS background over an tag?

    How to remove the border that show after clicking a picture