Flex-box sticky footer with inner flex-box container with y axis scrolling

Question

I know the subject is a mouthful but I couldn't find a better way to describe it in short.

I have a header, content-body, footer layout where the footer is 'sticky' using flex css, which works wonderfully. I have another container within the content-body that needs to expand to fill the available height and when it's contents are appended, it scrolls. So far, the only way I can get this to work is by setting the height of the content-body to a static px value, which breaks my desired vertical responsiveness.

Codepen of my attempt: http://codepen.io/sinrise/pen/QwKPKp

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}
#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
  background: yellow;
  height: 30px;  /* can be variable as well */
}
#body {
  flex: 1;
  border: 1px solid orange;
  padding-bottom: 20px;
}
.content {
  border: 1px solid gray;
  margin: 10px 0 0;
  width: 500px;
  margin: 0 auto;
  overflow-y: scroll;
  height: 200px;
}
.item:nth-child(odd) {
  background: #fbfbfb;
}
#footer{
  background: lime;
}

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">
    Body
    <div class="content">
      Content
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>
      <div class="item">Item 11</div>
      <div class="item">Item 12</div>
      <div class="item">Item 13</div>
      <div class="item">Item 14</div>
      <div class="item">Item 15</div>
      <div class="item">Item 16</div>
      <div class="item">Item 17</div>
      <div class="item">Item 18</div>
    </div>
  </div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

Answer 1

Try adding

#body {
    display: flex;
    flex-direction: column;
}
.content {
    height: 0;    /* Reduce the height as much as possible... */
    flex-grow: 1; /* ...but make it fill all remaining space  */
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
#header {
  background: yellow;
  height: 30px;
}
#body {
  flex: 1;
  border: 1px solid orange;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.content {
  border: 1px solid gray;
  margin: 10px 0 0;
  width: 500px;
  margin: 0 auto;
  overflow-y: scroll;
  height: 0;
  flex-grow: 1;
}
.item:nth-child(odd) {
  background: #fbfbfb;
}
#footer {
  background: lime;
}

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">
    Body
    <div class="content">
      Content
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>
      <div class="item">Item 11</div>
      <div class="item">Item 12</div>
      <div class="item">Item 13</div>
      <div class="item">Item 14</div>
      <div class="item">Item 15</div>
      <div class="item">Item 16</div>
      <div class="item">Item 17</div>
      <div class="item">Item 18</div>
    </div>
  </div>
  <div id="footer">
    Footer
    <br/>of
    <br/>variable
    <br/>height
    <br/>
  </div>
</div>

Answer 2

Forked your pen and got it to work.

What I changed:

• set minimum heights and "flex-basis" on #header and #footer
• changed "flex" to "flex-grow" on #body
• and, most importantly, instead of a min-height on the #wrapper, it's just a regular old height: 100%;