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 hide submenu until it is hovered over by mouse

    How to use a CSS Framework with Yesod?

    How to stop the latter part of javascript from being called?

    how to align an element but keep the space it left reserved

    How can I make a 2-level navigation bar? [closed]

    how to get rid of firefox image border

    How to align jQuery div to bottom left corner using CSS?

    how to make comment div active on hover

    How do I remove a CSS class from a jqGrid cell?

    How to add sub-menu (css) under actual sub-menu in WordPress

    How to make a css navigation menu “selected” option still clickable

    how to get fixed table columns width

    How can I vertically centre bullets that bracket headers

    How to print javascript within HTML id tag

    how to route to css/js files in mvc.net

    How to Make Text Stay Inside Div?

    How to optimize an image sequence in Chrome?

    How to pre-complie css style sheets in rails 2.3?

    How to use CSS in XML and XSL

    How can I Add sub menus to dropdown menus?

    How to assign a unique CSS id to each cell in a jqGrid?

    How to move hamburger menu to the front of overlay menu

    How to extract attribute values using css selectors?

    CSS: How do I prevent the background color of div from going behind the image it is sitting above?

    how to switch between left and right css rules using Jquery?

    How to overwrite styling in Twitter Bootstrap

    how to minify css file containing @page

    how to strech select?

    How do I align div vertically like in picture

    Jquery CSS How To Use Margin: 0 auto