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 revert to original css values after .css() method

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)

    How can I override CSS inherited properties

    How to cut the bottom overflow of page CSS/HTML

    How to use window height in css using jquery

    How to filter HTML elements based on their css attribute values ? [closed]

    How to apply CSS to part of some text without breaking the text content itself

    How can I remove/cover up a section of a border?

    How can I force an outer div to expand to height of inner div?

    How to show inline help using simple css and jquery

    How to make image control button for each image inside the div using css and js?

    Jquery slider; made the container transparent, how do I hide the image overflow?

    How to add different CSS to the same HTML tags?

    How do i get a font to show up smooth like this?

    How to compile CSS into SCSS

    How to set variables in LESS from a dynamic website?

    How to apply multiple CSS selectors to a paticular div?

    How to auto-adjust size of other input fields while typing into input field #1?

    How can I select my font awesome icons in CSS?

    How to position the arrow of this widget correctly?

    How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?

    How to fix element on the center of scrollable page?

    HTML5/CSS3 how to expand an anchor element to fit full size of it's li parent

    How to get the scroll bar with CSS overflow on iOS

    How to edit mobile CSS in SocialEngine?

    How to place html css php in javascript (Jquery)

    How to implement icon fonts like github.com

    How can I create CSS sprites from images stored in the database?

    How to change format of long text in cell?

    How can I fix left menu in bootstrap 3.0? [closed]