title: Flexbox: scrollable content with sticky footer
body: <p>I want to make a box (flex-item in this case) which always stays in the middle of it's container. In that box, there is a header, footer and content section. If the size of the content grows too big in height, I want the content section to be scrollable. The header and footer should always be visible and the box should always stay in it's container.</p>
  
  <p>Here is what I have been able to write:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="flex-container"&gt;
    &lt;div class="flex-item"&gt;
       &lt;header&gt;Header&lt;/header&gt;
       &lt;div class="content"&gt;
          A
        &lt;br&gt;B
        &lt;br&gt;C
        &lt;br&gt;D
        &lt;br&gt;E
        &lt;br&gt;F
        &lt;br&gt;G
        &lt;br&gt;H
        &lt;br&gt;I
        &lt;br&gt;J
        &lt;br&gt;K
       &lt;/div&gt;
       &lt;footer&gt;Footer&lt;/footer&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>The code is hosted on JSFiddle: <a href="https://jsfiddle.net/9fduhpev/3/" rel="noreferrer">https://jsfiddle.net/9fduhpev/3/</a></p>
  
  <p>To explain the same thing visually, here is the current situation:
  <a href="https://i.stack.imgur.com/aPwDC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aPwDC.png" alt="Problem"></a></p>
  
  <p>Here is what I want:</p>
  
  <p><a href="https://i.stack.imgur.com/7LbBJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7LbBJ.png" alt="How it should work"></a></p>