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 use css property under a class only

    How to import a CSS file from an external bundle resource

    How to change CSS over selected element only using $(this)

    How to generate CSS with loop in less

    CSS - How do I center a loading icon on a page that contains an iframe?

    contenteditable does not show pseudoselector :before in safari

    How to overlap divs in html

    How to overide CSS for width?

    How to unhecked parent checkbox

    How does the arrival of HTML5 and CSS3 affect jQuery?

    How can I alter this CSS so that it only applies to a certain div?

    How to place text above an element in HTML/CSS?

    How to avoid CSS styles to be applied for particular element

    How to float elements in rows.

    How to get div height 100% inside td of 100%

    How to disable and re-enable tabindex of hidden/visible elements?

    iphone - How to implement the effect of “float” for image, just like in CSS style

    How do I change properties of text that's being imported via php

    How does one style element within a label say?

    How to change ListView cell's text color in JavaFX using css

    Once I've designed a navigation bar using CSS & html — how can I put the html code in one place so it shows in each window? [duplicate]

    How to apply css styles to a tag?

    How to hold three different text alignments in one CSS Box?

    How to change the border of an element when selected?

    How to hide text behind image

    HTML CSS, how to create a Side bar or column

    How to change size of SVG circle

    How do you mimic multi row horizontal scroll table behavior with CSS and Divs?

    How to make a back-to-top button using CSS and HTML only?

    How to make div access the remaining space without using fixed height values?