Flexbox：具有粘性页脚的可滚动内容

Question

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

这是我能够写的：

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议你给它overflow: auto。有了它，它将在需要时滚动。

＆＃13;

＆＃13;

body {
  margin: 20px;
}
.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: auto;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

我会做这样的事情：

.content {
  height: 100%;
  overflow:auto;
  background-color: grey;
  flex: 1;
}

https://jsfiddle.net/9fduhpev/4/