CODEWITHSUNDEEP
cssflexbox
elexis
elexis

Reputation: 822

Nested flexbox with same height for nested items

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.

Upvotes: 1

Views: 1759

Answers (3)

Akash K.
Akash K.

Reputation: 637

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

Upvotes: 0

zer00ne
zer00ne

Reputation: 44088

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:

  1. table
  2. table-row
  3. table-cell

For use of these values read this.

CODEPEN

Upvotes: 1

Duc Nguyen
Duc Nguyen

Reputation: 474

Add min-height in .flex-header

Example:

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

Upvotes: 0

Related Questions