Sticky Flex-box footer with inner container with flexible box with y axis scroll

Question

I know that a topic is a sip, but I could not find a better way to describe it briefly.

I have a header, content-body, footer, where the footer is sticky using flex css, which works wonderfully. I have another container in the content body that needs to be expanded to fill the available height, and when it is added, it scrolls. So far, the only way to get this to work is to set the content-body height to a static px value, which violates 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.imtqy.com/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>

Run codeHide result

Answer 1

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

Hide result

Answer 2

.

:

• "flex-basis" #header #footer
• "flex" "flex-grow" #body
• , , min-height #wrapper, height: 100%;