How to fit flexbox containers to page?

Question

After much effort I have put together a flexbox layout intended to be a layout for a web application. There's a few outcomes I'm having trouble achieving - here are my goals:

the footer sticky to the bottom even as the page is resized
the header sticky to the top os the page is resized
the middle section of three columns to adjust in height as the browser is resized
the right hand column to stretch to the edge of the page

These pictures show that for some reason the page is taller than the viewing window of the browser.

Here's the page source:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>flexbox layout test</title>
<style>
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
    height: 100%;
}
.topbar {
  display: flex;
  width: 100%;
align-items: center;
}

.containerrow1 {
  margin: 15px;
  padding: 15px;
  display: flex;
  flex: 1;
background-color: yellow;
}

.containerrow2 {
  margin: 15px;
  padding: 15px;
  display: flex;
  flex: 2;
background-color: pink;
  height: 100vh;
}

.outercontainer {
  display: flex;
  flex-direction: column;
background-color: black;
}

.section {
  display: flex;
  flex-direction: column;
background-color: aliceblue;
  height: 100vh;
}


.section-nav {
  order: -1;
background-color: blue;
}

.section-nav, .section-content, .section-ads {
  overflow-y: scroll;
  padding: 2em;
}

</style>

  </head>
<body class='section'>


  <div class="outercontainer">
  <div class="containerrow1">
<div class="topbar">
  Blah
</div>
</div>

  <div class="containerrow2">

<main class="section-content">
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section <br/>content section
</main>
    <nav class="section-nav">
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
nav section <br/> nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>nav section <br/>
</nav>
    <aside class="section-ads">
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
ads section <br/> ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>ads section <br/>
</aside>

  </div>

  <div class="containerrow1">
<div class="topbar">
  footer
</div>
</div>

  </div>

  </body>
</html>

UPDATE: I don't know who to award the correct answer to. Seems to me possibly everyone contributed and shared some knowledge. Can anyone suggest an appropriate outcome? — Duke Dougal, Nov 25 '15 at 23:28
From [Accepting Answers: How does it work?](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work): *The bottom line is that you should accept the answer that you found to be the most helpful to you, personally.* — Michael Benjamin, Nov 25 '15 at 23:32

score 1 · Answer 1 · answered Nov 23 '15 at 00:19

Add these styles:

html,
body {
  margin: 0;        /* allow content to take entire screen space */
}

.outercontainer {
  height: 100%;     /* make this the height of the screen, preventing overflow */
}

.section-ads {
  flex: 1;          /* make this take the rest of the right space */
}

In my Snippet, I renamed .section-ads to .section-ads1, because Chrome is hiding it, possibly due to an ad-blocker(?).

Also, remove this style:

.containerrow1 {
  flex: 1;
}

Snippet:

*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  height: 100%;
  margin: 0;
}
.topbar {
  display: flex;
  width: 100%;
  align-items: center;
}
.containerrow1 {
  margin: 15px;
  padding: 15px;
  display: flex;
  background-color: yellow;
}
.containerrow2 {
  margin: 15px;
  padding: 15px;
  display: flex;
  flex: 2;
  background-color: pink;
  height: 100vh;
}
.outercontainer {
  display: flex;
  flex-direction: column;
  background-color: black;
  height: 100%;
}
.section {
  display: flex;
  flex-direction: column;
  background-color: aliceblue;
  height: 100vh;
}
.section-nav {
  order: -1;
  background-color: blue;
}
.section-nav,
.section-content,
.section-ads1 {
  overflow-y: scroll;
  padding: 2em;
}

.section-ads1 {
  flex: 1;
}

<body class='section'>
  <div class="outercontainer">
    <div class="containerrow1">
      <div class="topbar">
        Blah
      </div>
    </div>

    <div class="containerrow2">
      <main class="section-content">
        content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
        <br/>content section
      </main>
      <nav class="section-nav">
        nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>nav section
        <br/>
      </nav>
      <aside class="section-ads1">
        ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>ads section
        <br/>
      </aside>

    </div>

    <div class="containerrow1">
      <div class="topbar">
        footer
      </div>
    </div>

  </div>
</body>

Awesome thanks BUT and I'm sorry if I wasn't clear about this - I want to maintain the existing functionality where each of the columns has a scroll bar, with the column content scrollable. The example code does this. — Duke Dougal, Nov 23 '15 at 01:59
Hmm, my solution has three scrollbars in Chrome and IE, but not in Firefox. Is that what you're using? — Rick Hitchcock, Nov 23 '15 at 11:50
OSX Firefox 42 - the footer is not sticky so the page is taller than the browser viewing area. — Duke Dougal, Nov 23 '15 at 18:32
Looks like @Michael_B has the answer for Firefox: Add these styles to `.containerrow2`: `min-height: 0; min-width: 0; `. — Rick Hitchcock, Nov 23 '15 at 18:35

score 1 · Answer 2 · answered Nov 23 '15 at 00:51

I cleaned up your code a bit. The .section class was never applied since you did class="section-content" but then the former never applies. Change this to: class="section content" and instead of .section-contentyou can style this using .section and .section.content.

Also, setting vh: 100 on the section layer won't help since "vh" means viewport height, but not the height of the actual content.

Lastly I think you need an additional scroll layer to style the backgrounds as you like. Here is some updated code that should work as you intended:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.topbar {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.scroll {
  width: 100%;
  overflow: auto;
}
.containerrow1 {
  margin: 15px;
  padding: 15px;
  display: flex;
  background-color: yellow;
  height: 2vh;
}
.containerrow2 {
  margin: 0 15px;
  padding: 15px;
  display: flex;
  flex-direction: row;
  background-color: pink;
  align-items: stretch;
}
.outercontainer {
  display: flex;
  flex-direction: column;
  background-color: black;
  height: 100%;
  width: 100%;
}
.section {
  display: flex;
  background-color: aliceblue;
  flex-grow: 1;
}
.section.nav {
  order: -1;
  background-color: blue;
}
.section.nav,
.section.content,
.section.ads {
  padding: 2em;
}

<body class='section'>
  <div class="outercontainer">
    <div class="containerrow1">
      <div class="topbar">Blah</div>
    </div>
    <div class="scroll">
      <div class="containerrow2">
        <main class="section content">content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section
          <br/>content section</main>
        <nav class="section nav">nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>nav section
          <br/>
        </nav>
        <aside class="section ads">ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>ads section
          <br/>
        </aside>
      </div>
    </div>
    <div class="containerrow1">
      <div class="topbar">footer</div>
    </div>
  </div>
</body>

Wow thankyou awesome although please see the comment I made to the response by @RickHitchcock - I want to maintain the existing functionality that I have whereby each column has it's own scrollbar. — Duke Dougal, Nov 23 '15 at 02:00

score 1 · Answer 3 · edited May 23 '17 at 10:27

There's a few outcomes I'm having trouble achieving - here are my goals:

the footer sticky to the bottom even as the page is resized

the header sticky to the top os the page is resized

the middle section of three columns to adjust in height as the browser is resized

the right hand column to stretch to the edge of the page

So it seems like you've got much of it going. You just need to get the right-hand column to stretch and limit the entire layout to the size of the viewport.

Here are a few lines of code to make it all work.

Remove default margin from body.
```
html, body {
    height: 100%;
    margin: 0; /* new */
}
```
Explanation: HTML default body margin

Add a height to .outercontainer.

.outercontainer {
    display: flex;
    flex-direction: column;
    background-color: black;
    height: 100%; /* new */
}

Explanation: Working with the CSS height property and percentage values

Patch a Firefox bug involving vertical scrollbars in flexbox

.containerrow2 {
    margin: 15px;
    padding: 15px;
    display: flex;
    flex: 2;
    background-color: pink;
    height: 100vh;
    min-height: 0; /* new */
    min-width: 0; /* new */
}

Explanation: Vertical scroll rendering issue in Flexbox in Firefox

Stretch the right-most column

.section-ads { flex: 1; }

DEMO

Nice one although in the demo fiddle the right hand section does not stretch to the right hand side of the page. — Duke Dougal, Nov 23 '15 at 08:16
I misunderstood your original request. I understand what you mean now. I've revised my answer and demo. — Michael Benjamin, Nov 23 '15 at 12:20

How to fit flexbox containers to page?

3 Answers3