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..

    StackLayoutPanel Shows white ends at the rounded corners

    How do i shift the text in twitter bootstrap navbar to center?

    How to show text on image when hovering?

    How do I create a bar chart in CSS with an array of PHP float values?

    How to change CSS element of data-pid using jquery

    How to incorporate specific CSS files for Responsive Design for Desktop and Mobile Browsers

    How does the CSS Block Formatting Context work?

    How can I hide slide menu in appcelerator?

    How can I make clickable list with sublinks ?

    How do I reduce the vertical space between list items in an unordered list?

    How to add Print headers and footers in HTML, CSS and JavaScript?

    How to center text over an image while keeping it below fixed nav bar in css?

    How do I center a background image to its parent element?

    How to set cursor off screen?

    CSS & Button: How to override native CSS of html buttons element?

    how to prevent child element from widening parent element's width in css

    How to load CSS on SSL pages?

    how to overwrite css height set by jquery/javascript?

    How to close CSS3 Lightbox by clicking outside of the current image?

    How to get span to be only as wide as the image inside of it?

    how to display background color in outlook 2010 html email?

    How do I put several elements on the second row in a div

    How to hide this element using CSS or JQuery

    How can I conditionally assign a color to text in jade

    How to size this text with css?

    How to prevent outside CSS from adding and overriding ReactJS component styles

    Google font shows boxes in Internet Explorer 8 - IE 8

    How to replicate this CSS sibling selector in jQuery?

    How to fade-in and fade-out background-image with CSS transition?

    How to get a navbar to display text depending on button clicked