Make children divs the height of tallest child

Question

I have two child <div> elements inside of a parent container <div> as shown:

<div class="row">
    <div class="item">
        <p>Sup?</p>
    </div>
    <div class="item">
        <p>Sup?</p>
        <p>Wish that other guy was the same height as me</p>
    </div>
</div>

I tried the following CSS:

.item {
    background: rgba(0,0,0,0.1);
    display: inline-block;
}

.row {
    border: 1px solid red;
}

How can I get both children (div.item) to be the height of the tallest child?

jsFiddle: http://jsfiddle.net/7m4f7/

This question has been asked a multitude of times. See this question. http://stackoverflow.com/questions/16592597/issue-with-responsive-columns-having-equal-height — Cam, May 16 '13 at 18:35
Simple. Easy. [Equal Height Columns with Flexbox](http://stackoverflow.com/a/33815389/3597276). — Michael Benjamin, Feb 06 '16 at 14:07

score 25 · Accepted Answer · edited May 16 '13 at 19:20

25

One solution is to change the display value from inline-block to table-cell for the descendant div.item elements:

.row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px; /* For controlling spacing between cells... */
}
.item {
    background: rgba(0,0,0,0.1);
    display: table-cell;
}

Example

edited May 16 '13 at 19:20

Marc Audet

46,011
11
63
83

answered May 16 '13 at 18:38

Yana

319
3
7

Careful, table-cell is a css3 and doesnt work in all browsers. – Cam May 16 '13 at 18:40
9

Actually the `table-cell` value was introduced in the [CSS 2.1 Specification](http://www.w3.org/TR/CSS2/visuren.html#display-prop) – Yana May 16 '13 at 18:42
2

Please add display: table and border-spacing: 20px 20px to .row in your fiddle, makes the columns more apparent, thank you! http://jsfiddle.net/audetwebdesign/7m4f7/5/ – Marc Audet May 16 '13 at 18:56
2

and for those who wonder why this doesn't work for you. make sure you have not set a float rule. You can have `float: none` Because sometimes we use float to eliminate carriage return spaces with `inline-block`. – Jomar Sevillejo Apr 22 '15 at 04:10
Kudos to Jomar for that extra tip-- totally helped! – Ricebandit Apr 19 '17 at 21:14

score 13 · Answer 2 · answered May 16 '13 at 18:42

13

Another solution is to use flexbox: http://jsfiddle.net/7m4f7/4/

.item {
    background: rgba(0,0,0,0.1);
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.row {
    border: 1px solid red;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

However, support is limited (but getting better!) See http://caniuse.com/flexbox

Otherwise you need to use javascript to set the heights manually.

answered May 16 '13 at 18:42

nullability

10,545
3
45
63

2

given it does work, suppose that I have a lot of child elements that were divided automatically into different lines when I used `inline-block` but now it all gets stuffed in one line. Is there a work around for that. – akxer Feb 03 '16 at 22:39
@akabhirav, yes — use `flex-wrap: wrap; flex-direction: row;` – crishoj Oct 31 '17 at 23:58

fnostro · Answer 3 · 2013-05-16T19:08:24.270

10

jquery version: FIDDLE

var maxheight = 0;

$('div div.y').each(function () {
    maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight); 
});

$('div div.y').height(maxheight);

EDIT: Just noticed you're not dealing with the height of <div>'s, but <p>'s

edited May 16 '13 at 19:08

answered May 16 '13 at 19:02

fnostro

4,531
1
15
23

score 1 · Answer 4 · answered Nov 06 '22 at 15:21

You can use grid:

<div style="display:grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
    <div class="item">
        <p>Sup?</p>
    </div>
    <div class="item">
        <p>Sup?</p>
        <p>Wish that other guy was the same height as me</p>
    </div>
</div>

Make children divs the height of tallest child

4 Answers4

Linked

Related