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 for formatting Crystal Report in Winform?

    How to get CSS left property value on second element of anchor

    How do i make a flexible div with a background in css

    How does one creates inner and outer triangles on a div with pure CSS?

    How to disable correctly CSS3 transition property when needed

    How to center a border-width shape properly, relative to its parent input button?

    How do I use CSS to add a non-rectangular border around an image?

    How to make a div to fit all available width even hidden with scroll?

    How do I stop my 'body' from eating my 'foot'

    How to change H3 color in bootstrap using CSS file

    css - how to fix first td in table on top if the second td has multiline?

    Slideshow with specific Text on each Image

    How can I delete unused css lines?

    How to animate multiple elements at the same time?

    How to work with dynamic container in Isotope?

    How to make Zig Zag borders using CSS? [closed]

    css3 pure: how to hover an element outside?

    CSS: how to make background on left and right of the content

    How to disable border on the second last child of div in CSS?

    How to correctly apply a CSS style to all the images in a div having a specific class?

    How to use if else blocks to decide style in Razor?

    how to make div fixed and ot move upon window resize

    How to use this CSS rule for divs? [JSFiddle]

    In CSS, how to create automatic section numbering only when there are multiple sections?

    How to read contents of an external script/style?

    How to style the

    How to remove blue border around the button in Firefox?

    How to set up css hierarchies

    How can I automatically change the CSS min-height value of a div when a JavaScript is performed?

    how to set footer at bottom?