可滚动侧栏中的Flexbox粘贴页脚

Question

我有一个带有页脚的移动侧边栏，该页脚应固定在底部，但是当导航链接很多时，页脚将被向下推，您必须滚动才能看到它。

这是一个简化的演示，显示侧边栏已经扩展了内容。您会看到页脚粘在侧边栏的底部，而没有被多余的链接推下，滚动时它仍与链接重叠。

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>

我过去曾与flexbox合作，但在这里我无法弄清楚自己在做什么错。如何使页脚出现在导航链接下方？

Answer 1

另外，您还#side-menu-nav需要拥有flex-shrink: 0;，否则它将缩小以适合其父项。

堆栈片段

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>