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 can I make the ul contain li in its content box?

    How to fix layout to browser window without scroll

    How to indent a data table with CSS? [closed]

    How can I change the colour of a line that starts with specific characters in javascript/css?

    How to set ASP dropdownlist to read only with css or javascript?

    How to CSS a two column list of items?

    how to use php variable in css

    how to do display none using css

    How to make div elements inside a div background image responsive using css

    How to cancel specific one element at external CSS?

    How to make the footer stick to the bottom?

    How can I animate the drawing of text on a web page?

    css - how to fix first td in table on top if the second td has multiline?

    How to change the Home icon in Primefaces Breadcrumb?

    How much media queries?

    How can one pass component property values to the css/less clientlibs for that component? AEM 6.2

    How to fix the heading in html table using css

    How to make the header part of the site as low as the logo?

    using the unorthodox `head {display: block}` to show text to user?

    How to do something like border-top-left-color. [CSS]

    MeteorJs: how to add multiple js and css file based on templates.?

    How to pass a local file name to css-validator.jar?

    How can I print the selected item from bootstrap drop down using jquery or javascript in php

    How to get menu text vertically aligned with inherited height

    How can I change using jekyll bootstrap navbar colour?

    How to correctly override inaccessible HTML content with CSS?

    how to fix this horizontal list on Chrome and Opera?

    How to set CSS for disabled checkboxes?

    CSS: How to add classes to existing grid that allow skipping columns on the left side

    How to find a unique identifier using CSS for a class