Equal height sections within flexbox columns?

Question

I'm using flexbox columns for a pretty basic layout. There is a header, image and a list below. List must have a border and can have varying contents. Is it possible to have those list sections equal height based on the biggest without JavaScript? Or one needs to calculate the biggest section height with JS and apply it to others?

This is what I want:

This is what I have:

 .columns { display: flex; } .col { margin-left: 20px; } ul { margin: 0; } .list { padding: 24px; border: 1px solid blue; } 

 <div class="columns"> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> </div> </div> 

Answer 1

Since both columns are inside the same flex container, yes, the list boxes can be the same height (based on the tallest content) using only CSS.

 .columns { display: flex; } .col { display: flex; /* new */ flex-direction: column; /* new */ margin-left: 20px; } .list { flex: 1; /* new */ padding: 24px; border: 1px solid blue; } ul { margin: 0; } 

 <div class="columns"> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> </div> </div> 

Here are a few more examples:

jsFiddle demo

 .columns { display: flex; } .col { display: flex; /* new */ flex-direction: column; /* new */ margin-left: 20px; } .list { flex: 1; /* new */ padding: 24px; border: 1px solid blue; } ul { margin: 0; } 

 <div class="columns"> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> </div> </div> <br> <div class="columns"> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> </div> </div> <br> <div class="columns"> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="col"> <h3>Header</h3> <div class="list"> <ul> <li>List item</li> <li>List item</li> </ul> </div> </div> </div> 

Answer 2

You should set .col as flex too

.col{ display:flex; }

and your class columns is better named row