Flexbox sticky footer within scrollable sidebar

Question

I have a mobile sidebar with a footer that should stick to the bottom, but when there are a lot of navigation links the footer is pushed down and you must scroll to see it.

Here's a simplified demo showing the sidebar already expanded over the content. You can see the footer sticking to the bottom of the sidebar and not being pushed down with the extra links, and it remains overlapping the links when scrolling.

body {background: #CCC;}

#side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #FFF;
  box-shadow: 0 0 20px #000;
  
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100vh;
}

#side-menu-header,
#side-menu-footer {
  flex-shrink: 0;
  background-color: skyblue;
  padding: 0.5rem;
}

#side-menu-nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#side-menu-nav a {
  padding: 0.5rem;
}

<aside id="side-menu">
  <header id="side-menu-header">
    Logo
  </header>
  <nav id="side-menu-nav">
     <a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a>
  </nav>
  <footer id="side-menu-footer">
    Footer
  </footer>
</aside>

<p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p>

I've worked with flexbox in the past, and I can't figure out what I'm doing wrong here. How can I make the footer appear below the navigation links?

Answer 1

Also your #side-menu-nav needs to have flex-shrink: 0;, or else it will shrink-to-fit its parent.

Stack snippet

body {background: #CCC;}

#side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #FFF;
  box-shadow: 0 0 20px #000;
  
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100vh;
}

#side-menu-header,
#side-menu-footer {
  flex-shrink: 0;
  background-color: skyblue;
  padding: 0.5rem;
}

#side-menu-nav {
  flex-shrink: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#side-menu-nav a {
  padding: 0.5rem;
}

<aside id="side-menu">
  <header id="side-menu-header">
    Logo
  </header>
  <nav id="side-menu-nav">
     <a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a>
  </nav>
  <footer id="side-menu-footer">
    Footer
  </footer>
</aside>

<p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p>

Answer 2

As far as I understood, you want the Header and Footer of your sidebar sticky. Just give your #side-menu-nav a overflow: auto or overflow-y: scroll, so that the element can fit between header and footer.

body {background: #CCC;}

#side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #FFF;
  box-shadow: 0 0 20px #000;
  
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100vh;
}

#side-menu-header,
#side-menu-footer {
  flex-shrink: 0;
  background-color: skyblue;
  padding: 0.5rem;
}

#side-menu-nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#side-menu-nav a {
  padding: 0.5rem;
}

<aside id="side-menu">
  <header id="side-menu-header">
    Logo
  </header>
  <nav id="side-menu-nav">
     <a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a>
  </nav>
  <footer id="side-menu-footer">
    Footer
  </footer>
</aside>

<p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p>