Flexbox：带有页脚的可滚动内容

Question

我想制作一个始终位于容器中间的盒子（在这种情况下为弹性物品）。在该框中，有一个页眉，页脚和内容部分。如果内容的大小在高度上太大，我希望内容部分可滚动。页眉和页脚应始终可见，并且框应始终保留在其容器中。

这是我能够写的：

的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>