React-Flexbox-Grid: How to fill the whole page?

Question

I am using react-flexbox-grid from https://github.com/roylee0704/react-flexbox-grid, while it allows me to specify the column sizes I am not able to fill my whole page. I want the Holy-Grail layout as seen here:

Answer 1

You can do this with plain ol' flexbox. You probably just want a container with min-height: 100vh;

<div class="container">
  <div class="header"></div>
  <div class="content">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
  <div class="footer"></div>
</div>

With the following CSS:

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.header, .footer {
  height: 76px;
}

.left, .right {
  width: 76px;
}

.content, .center {
  flex: 1;
}

.content {
  display: flex;
}

here is a simple codepen demonstrating it in practice