Nested flexbox with same height for nested items

Question

I am trying to implement a card pattern (similar to material design) making use of flexbox for layout. Each card has a header and a content and uses flexbox to arrange them.

Cards have a fixed width so if a header is long it will wrap, making that header longer. The problem is I want each card in a row to look consistent, so I want each header in a row to have the same height.

The height of the card is already consistent thanks to the outer flexbox. I don't know how to make the headers' height consistent.

the basic layout is:

<div class="flex-container">
    <div class="flex-item">
        <div class="flex-header">
            My header
        </div>
        <div class="flex-content">
            My content
        </div>
    </div>

    <div class="flex-item">
        <div class="flex-header">
            My header
        </div>
        <div class="flex-content">
            My content
        </div>
    </div>    
</div>

Flexbox css:

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item {
  width: 200px;
  margin: 10px;

  display: flex;
  flex-flow: column;
}

.flex-header {
  background-color: navy;
  font-size: 2em;
}

.flex-content {
}

I also have an example codepen.

possible duplicate: [Equal height columns for flex items of different flex containers](http://stackoverflow.com/q/36721216/3597276) — Michael Benjamin, May 10 '16 at 04:21
related: [Is it possible to have equal height columns in a multi-line flex container?](http://stackoverflow.com/q/36004926/3597276) — Michael Benjamin, May 10 '16 at 04:21

zer00ne · Answer 1 · 2016-05-10T05:01:19.230

1

The behavior you want is unique found in only one HTML Interface which is the table. In order to avoid all the gripes and lecturing from everyone about using a table for layout, try using the display properties with the values of:

table
table-row
table-cell

For use of these values read this.

CODEPEN

edited May 10 '16 at 05:01

answered May 10 '16 at 04:53

zer00ne

41,936
6
41
68

score 0 · Answer 2 · answered May 10 '16 at 03:59

0

Add min-height in .flex-header

Example:

.flex-header {
  background-color: navy;
  font-size: 2em;
  min-height: 80px;
}

answered May 10 '16 at 03:59

Duc Nguyen

464
3
6

Wouldn't solve the issue, if a long header pushed the height larger than `min-height: 80px` then one header will be bigger than the rest. – elexis May 10 '16 at 04:43

score 0 · Answer 3 · answered Dec 30 '16 at 14:21

I was looking to make a same layout as you mentioned and after reading the answers here, that it is not possible with just CSS, I tried JS solutions and found this awesome library here.

I've created a codepen example. It might help someone who's looking for the same. All you need to do is add the library and use the following jQuery code.

$('.item-image').matchHeight({
  byRow: true,
  property: 'height',
  target: null,
  remove: false
});

Regards

Nested flexbox with same height for nested items

3 Answers3

Linked