html - Flexbox:带有粘性页脚的可滚动内容

Question

我想制作一个始终位于其容器中间的盒子(在本例中为 flex 元素)。在该框中，有页眉、页脚和内容部分。如果内容的大小在高度上增长太大，我希望内容部分可以滚动。页眉和页脚应始终可见，框应始终位于其容器中。

这是我能写的:

HTML

<div class="flex-container">
  <div class="flex-item">
     <header>Header</header>
     <div class="content">
        A
      <br>B
      <br>C
      <br>D
      <br>E
      <br>F
      <br>G
      <br>H
      <br>I
      <br>J
      <br>K
     </div>
     <footer>Footer</footer>
  </div>
</div>

CSS

body {
  margin: 120px;
}

.flex-container {
  display: flex;
  width: 200px;
  height: 200px; /* We can assume that the container's height is hardcoded in this example, but the end solution should work even if this value is changed*/
  border: 1px solid black;
  justify-content: center;
}

.flex-item {
  box-sizing: border-box;
  width: 150px;
  border: 5px solid blue;
  align-self: center;
  background-color: red;
  display: flex;
  flex-flow: column;
  max-height: 100%;
}

.content {
  /* It should be possible to scroll this element when it get too big in height*/
  background-color: grey;
  flex: 1;
}

代码托管在 JSFiddle 上:https://jsfiddle.net/9fduhpev/3/

为了直观地解释同样的事情，这里是当前的情况:

这是我想要的:

Answer 1

使用 overflow-y: auto;。

阅读:http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

body {
  margin: 120px;
}

.flex-container {
  display: flex;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  justify-content: center;
}

.flex-item {
  box-sizing: border-box;
  width: 150px;
  border: 5px solid blue;
  align-self: center;
  background-color: red;
  display: flex;
  flex-flow: column;
  max-height: 100%;
}

.content {
  background-color: grey;
  flex: 1;
  overflow-y: auto;
}

<div class="flex-container">
  <div class="flex-item">
     <header>Header</header>
     <div class="content">
        A
      <br>B
      <br>C
      <br>D
      <br>E
      <br>F
      <br>G
      <br>H
      <br>I
      <br>J
      <br>K
      <br>L
     </div>
     <footer>Footer</footer>
  </div>
</div>