修复了带有可滚动内容的标题和侧边栏[重复]

Question

我正在尝试使用 flexbox 创建一个布局，该布局具有固定的标题和侧边栏，以及主面板中的可滚动内容。侧边栏预计将显示在较小屏幕上的内容上方，效果很好。我已经设法使标题变粘，但我不确定如何使侧边栏变粘并且仍然能够滚动内容。

body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#navbar {
  background-color: #ffccaa;
  position: sticky;
  top: 0;
}

#wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

#sidebar {
  background-color: #ccaaff;
  flex-basis: 10rem;
  flex-grow: 1;
}

#content {
  background-color: #ccffaa;
  flex-basis: 0;
  flex-grow: 999;
}

<div id="navbar">
  <p>navbar</p>
</div>
<div id="wrapper">
  <div id="sidebar">
    <p>sidebar</p>
  </div>
  <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel tellus non nulla aliquet mollis sit amet a eros. Quisque nec lacus ligula. Sed nec risus feugiat enim ultrices venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum, nibh vel scelerisque aliquam, est ipsum faucibus ipsum, eget molestie felis risus non enim. Sed vulputate, odio a rutrum condimentum, massa justo fringilla nibh, nec cursus nunc purus molestie risus. Maecenas imperdiet non odio at maximus. Nullam luctus rutrum fermentum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel tellus non nulla aliquet mollis sit amet a eros. Quisque nec lacus ligula. Sed nec risus feugiat enim ultrices venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum, nibh vel scelerisque aliquam, est ipsum faucibus ipsum, eget molestie felis risus non enim. Sed vulputate, odio a rutrum condimentum, massa justo fringilla nibh, nec cursus nunc purus molestie risus. Maecenas imperdiet non odio at maximus. Nullam luctus rutrum fermentum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel tellus non nulla aliquet mollis sit amet a eros. Quisque nec lacus ligula. Sed nec risus feugiat enim ultrices venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum, nibh vel scelerisque aliquam, est ipsum faucibus ipsum, eget molestie felis risus non enim. Sed vulputate, odio a rutrum condimentum, massa justo fringilla nibh, nec cursus nunc purus molestie risus. Maecenas imperdiet non odio at maximus. Nullam luctus rutrum fermentum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel tellus non nulla aliquet mollis sit amet a eros. Quisque nec lacus ligula. Sed nec risus feugiat enim ultrices venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum, nibh vel scelerisque aliquam, est ipsum faucibus ipsum, eget molestie felis risus non enim. Sed vulputate, odio a rutrum condimentum, massa justo fringilla nibh, nec cursus nunc purus molestie risus. Maecenas imperdiet non odio at maximus. Nullam luctus rutrum fermentum.</p>
  </div>
</div>

Answer 1

在 header 或 wrapper 上定义一个高度，然后它就可以工作了。

来自MDN：

为了让overflow生效，块级容器 必须具有设定的高度（height 或 max-height）或 white-space 设置为 nowrap。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;  /* overrides default margin */
}

#navbar {
  background-color: #ffccaa;
  flex: 0 0 50px; /* flex-grow, flex-shrink, flex-basis */
}

#wrapper {
  display: flex;
  height: calc(100vh - 50px); /* height of body less height of navbar */
}

#sidebar {
  background-color: #ccaaff;
  flex-basis: 10rem;
}

#content {
  background-color: #ccffaa;
  flex: 1;
  overflow: auto; /* triggers scrollbar */
}

<div id="navbar">
  <p>navbar</p>
</div>
<div id="wrapper">
  <div id="sidebar">
    <p>sidebar</p>
  </div>
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel tellus non nulla aliquet mollis sit amet a eros. Quisque nec lacus ligula. Sed nec risus feugiat enim ultrices venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum, nibh vel scelerisque aliquam, est ipsum faucibus ipsum, eget molestie felis risus non enim. Sed vulputate, odio a rutrum condimentum, massa justo fringilla nibh, nec cursus nunc purus molestie risus. Maecenas imperdiet non odio at maximus. Nullam luctus rutrum fermentum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel tellus non nulla aliquet mollis sit amet a eros. Quisque nec lacus ligula. Sed nec risus feugiat enim ultrices venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum, nibh vel scelerisque aliquam, est ipsum faucibus ipsum, eget molestie felis risus non enim. Sed vulputate, odio a rutrum condimentum, massa justo fringilla nibh, nec cursus nunc purus molestie risus. Maecenas imperdiet non odio at maximus. Nullam luctus rutrum fermentum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel tellus non nulla aliquet mollis sit amet a eros. Quisque nec lacus ligula. Sed nec risus feugiat enim ultrices venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum, nibh vel scelerisque aliquam, est ipsum faucibus ipsum, eget molestie felis risus non enim. Sed vulputate, odio a rutrum condimentum, massa justo fringilla nibh, nec cursus nunc purus molestie risus. Maecenas imperdiet non odio at maximus. Nullam luctus rutrum fermentum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel tellus non nulla aliquet mollis sit amet a eros. Quisque nec lacus ligula. Sed nec risus feugiat enim ultrices venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum, nibh vel scelerisque aliquam, est ipsum faucibus ipsum, eget molestie felis risus non enim. Sed vulputate, odio a rutrum condimentum, massa justo fringilla nibh, nec cursus nunc purus molestie risus. Maecenas imperdiet non odio at maximus. Nullam luctus rutrum fermentum.</p>
  </div>
</div>

jsFiddle demo