Липкий нижний колонтитул 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>

Answer 2

Насколько я понял, вы хотите, чтобы верхний и нижний колонтитулы боковой панели были прикреплены.Просто укажите #side-menu-nav a overflow: auto или overflow-y: scroll, чтобы элемент мог поместиться между верхним и нижним колонтитулами.

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>