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 prevent css hover effects executing before you reach the element with your mouse?

    How can I flip multiple div at same time?

    How to refer to an id with special characters in CSS

    how to make body tag elastic?

    CSS - How to make a 100% height div not overlap it's contents when window is resized

    how do I properly position a button element with css?

    How to auto adjust parent DIV height according to the contents in child DIV?

    How do I change the a border-color on rollover?

    Show or hide div based on selected value

    How to make a list float to the right in CSS?

    How to have img popout when containing div is clicked (Image gallery)?

    How to make one file compatible with different browsers?

    How to fade loop background images?

    How to resize image on window resize in CSS?

    How can I use :before property to create a square before a span

    How to get css width of class?

    How to auto position sidenav in twitter bootstrap while sliding

    How to style Accelerator display text in JavaFX ContextMenu via CSS?

    Showing/hiding elements inside a div block with HTML and CSS

    How to spread elements evenly (horizonatly)?

    How to create a pure CSS tooltip with HTML content for inline elements

    How to target CSS class names that start with digit

    How to make margins collapse evenly?

    How to apply css to iframe content? [closed]

    How to change a class CSS with a Greasemonkey script?

    How to set up navigation with fading (sprite) background image

    How to use a background image in Webfolio WordPress theme without breaking CSS header?

    How would use span to create different styles between selected characters and the rest?

    How to Dynamically create a CSS class using AngularJS

    How to overlap elements inside of a ng-repeat list - position: absolute?