如何使用 flexbox 实现以下带有粘性页眉和页脚的标记？

Question

我正在学习 CSS flexbox，我想实现这个标记：

我希望 header 和 footer 是“粘性的”（header 总是在顶部，footer 总是在底部）。
如果 article 或 aside1 或 aside2 大小不适合页面，我希望页眉和页脚之间的区域可以滚动。

所以我的计划是：

使用 display: flex 和 column direction 为其项目创建容器元素
它将包含 3 个项目：header、footer 和 { aside1、article 和 aside2 }，它们将被包装到另一个容器中.
这个另一个容器将有 display: flex 本身和 row direction 的项目：aside、article 和 aside2

我的标记非常简单：

<div class="wrapper">
  <header>This is header</header>
  
  <div class="content">
    <aside>aside1</aside>
    <article>article</article>
    <aside>aside2</aside>
  </div>

  <footer>This is footer</footer>
</div>

样式如下：

html, body {
  height: 100%;
}

/* Main wrapper, sizes = 100% to fit the viewport */
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  border: solid 1px black;
  flex-direction: column;
}

/* Just some styling, ignore this */
header,
article,
aside,
footer {
  border: solid 1px #888;
  padding: 1rem;
  text-align: center;
}

header {
  background-color: #cfffff;
}

/* flex: 1 makes it "stretch" allowing header and footer
to have their default sizes  */
.content {
  display: flex;
  flex: 1;
  overflow-y: scroll;
}

aside {
  box-sizing: border-box;
  vertical-align: top;
  background-color: #cfffcf;
  width: 250px;
}

article {
  background-color: #ffcfff;
  flex: 1;
}

footer {
  background-color: #ffffcf;
}

问题是每当 article 内容溢出容器时，滚动就不是我期望的那样：

我想了解：

为什么会这样？
正确的做法是什么？

Answer 1

使用新样式

position: sticky;

html, body {
  height: 100vh;
}

/* Main wrapper, sizes = 100% to fit the viewport */
.wrapper {
  width: 100%;
  display: flex;
  border: solid 1px black;
  flex-direction: column;
}

/* Just some styling, ignore this */
header,
article,
aside,
footer {
  border: solid 1px #888;
  padding: 1rem;
  text-align: center;
}

header {
  background-color: #cfffff;
  position: sticky;
  top:0;
}

/* flex: 1 makes it "stretch" allowing header and footer
to have their default sizes  */
.content {
  display: flex;
  flex: 1;
}

aside {
  box-sizing: border-box;
  vertical-align: top;
  background-color: #cfffcf;
  width: 250px;
}

article {
  background-color: #ffcfff;
  flex: 1;
}

footer {
position: sticky;
bottom:0;
  background-color: #ffffcf;
}

<div class="wrapper">
  <header>This is header</header>
  
  <div class="content">
    <aside>aside1</aside>
    <article>article</article>
    <aside>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</aside>
  </div>

  <footer>This is footer</footer>
</div>

如何使用 flexbox 实现以下带有粘性页眉和页脚的标记？

How to implement the following markup with sticky header and footer using flexbox?

html

css

markup

flexbox