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 have a different visited link colour in 2 sections of a html?

    How to make list of all classes in the page using jQuery?

    CSS: Image is stretched to square, how to crop it?

    CSS: How to center text over an image, both always centered and proportional regardless of window size

    How to temporarily add a CSS style?

    How can I click a specific li without an id or class?

    How to manage text breaks in span using js, css or anything else

    How to strikethrough empty div

    Panel in Horizontal List item showing behind Button

    How can i use css frameworks without cluttering html with too many classes [closed]

    Is it possible to see how your html & css code would look on a mobile device without actually have a website url?

    How to access this element with CSS

    How to make the bootstrap button,when clicked to redirect to a specific page

    How to center align

    How to apply css style on the list of div by defending on the class name using javascript

    CSS puzzle: How to add background-image and set height/width on empty span?

    How does css position impact element width/height?

    How to add or create an illusion of movement to a fixed div?

    when users upload an image how can i use css to minimize skewing?

    How to make CSS animation happen the moment the website loads

    How do I select every other div class element using just CSS (no js)

    How to know the correct css selector or group of selector for any html element quickly?

    How to combine this css?

    How to remove curved line in HTML/CSS

    How to align links on top of each other inside of a box with CSS?

    How to position an image list marker so that the text is vertically centered

    How to set out css properly?

    How to toggle a separate drop down beneath a grid of items using JQuery?

    How to hide a div class in Wordpress? CSS

    How to create a gullwing shape with CSS