The holy grail with three columns using flexbox

I am trying to achieve a three column layout that is commonly described as the "holy grail" (see this ALA article ) using a new one display: flex


The requirements are as follows:

  • Header and footer with three columns in between
  • Outer columns are fixed width
  • The inner column stretches to fill the space between the side columns, with a minimum and maximum width beyond which it will not stretch (so neither should the container)
  • The footer should be at the bottom of the viewport until the content actually pushes it down below.

I got the first three requirements with the following code:

<div class="container">
  <header class="masthead">
    <h1>The Header</h1>
  <div class="side-left column">
    Left sidebar  
  <div class="middle column">     
    Content goes here
  <div class="side-right column">
    Right sidebar
  <footer class="footer">
    &copy; Footer



.container {
  display: flex;
  flex-flow: row wrap;
  min-width: 500px;
  max-width: 1100px;
.masthead {
  flex: 1 100%;
.side-right {
  flex: 0 0 150px;
.middle {
  flex: 1;
.footer {
  flex: 1 100%;


Live in Action: jsBin

However, I am stuck at 100% height. I've already tried setting either some of the columns or the container to height: 100%

or min-height: 100%

, but none of them work. Do I need one of the many other flexibility properties to handle this? I can't seem to see the forest through the trees.


source to share

1 answer

.container { min-height: 100vh; }



All Articles