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 align specific element to the right using :last-child pseudo

    How to measure the amount of time an animation took place using JavaScript

    How to include a font .ttf using CSS?

    How do you add a footer with css display: table?

    How to write css for each page in rails 3

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    How to always show up pure HTML5/CSS modal window without clicking a link which activates it?

    Show-hide based on two sets of selectors--how to make them work together?

    how do I override user agent — using buttons from angularjs

    How I make my Dropdown Menu Fade-In Using CSS

    How to confine an animated div to its parent div

    When I try to print a page I created using jQuery Mobile, it always prints an extra blank page. How can I stop this?

    Unsure of how to wrangle my javascript dependencies

    How to transform Menu icon to Arrow icon? [closed]

    how to avoid css jitters while applying css border with hover pseudo class

    How to debug CSS bundled by Webpack?

    How would you explain CSS positioning to a human being?

    Responsive CSS layout - how to stretch the background overlay

    How to apply rounded borders to highlight/selection

    How to create a card flip effect on DIV using javascript

    how do i edit my CSS to show following things please [closed]

    How can we wrap the line based on border size of windows browser?

    How to select, focused textarea?

    css how to make full height div with scroll support?

    How do I get these hover effects but with diamonds instead of circles

    How can i make image size big using css?

    How to make a css media query snippet in ATOM editor

    How does CSS handle specificity tie?

    How do I remove the gap between the header and image slider

    How to simulate multiple
    tag with CSS