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 refer to third level lists in css?

    How to remove line break after DIV in CSS

    Auto-scaled image not shown correctly with IE 10

    How to do expand and collapse for table column in html file?

    How do I assign an external CSS file to a javascript-constructed SVG object?

    How to center my a div in a table using CSS?

    How to cycle through divs using left/right

    How do you get multiple views in one window like JSFiddle does [closed]

    CSS stylesheets at top or bottom? or How to solve blank page issue?

    How to start Bootstrap carousel with the first image at each occurrence of a modal window? [closed]

    How does css left / position works with bootstrap header

    How can div with be controlled with responsiveness

    Resize the content of a div based on how many objects are in the div

    CSS how to vertically align text within a pseudo element

    how to make the images always in center

    How to change element properties on hover with CSS in following case

    How to set parent div height to self adapt to the inner div height?

    how do I get my background to stretch the entire page

    How can I use javascript, or css to make my text somewhat transparent?

    PHP foreach, CSS and jQuery script.. How to interact?

    how to fix closure compiler error on css({ float: 'left' }) [duplicate]

    How to markup an obscure data table layout for screen readers?

    How to make a scrolling website mobile friendly?

    How to change a scrolling element behavior on resize? (HTML, CSS, JavaScript) [duplicate]

    CSS Sub Menu shows up outside body

    How do I make the dropdown menu width the same as the tab size?

    How to center the boxes as shown?

    In IE6, how to float item to right without clearing it?

    How to add a background to a boostrap grid row (including padding!)?

    HTML/CSS How do I get 2 completely independant scrollbars?