CSS flex boxes, dynamic footer height and scrollable main body

Question

I am trying to build a simple layout using flex box. In the past I used to rely on Javascript to resize the section based on the footer height...

The section container should show scrollbars when needed:

When the section growth pass the total available height of the page minus the footer height.

Is that possible in pure CSS?

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
section {
  /* flex: 1; would be enough but it looks bad in IE */
  flex: 1 0 auto;
  overflow-y: auto;
}
/* Unimportant part */

body {
  font: 16px/1.5 sans-serif;
}
p {
  margin-bottom: 1em;
}
header,
section,
footer {
  padding: 2em;
  color: white;
}
header {
  background-color: #85144B;
}
section {
  background-color: #3D9970;
}
footer {
  background-color: #001F3F;
}
.input {
  border: 1px solid red;
}

<header>
  Here is my fixed header
</header>
<section>
  <p>Bacon ipsum dolor sit amet corned beef turducken jowl chuck, biltong turkey capicola bresaola. Pork strip steak prosciutto ball tip flank frankfurter ham filet mignon jowl pancetta. Shankle kielbasa salami jerky filet mignon kevin. Shankle beef ribs
    ham hock porchetta venison pork tail sausage meatball. Short loin shoulder bresaola frankfurter ball tip spare ribs andouille shank salami ham tongue beef pork chop kevin. Beef turducken biltong sirloin capicola, ribeye short ribs brisket swine shank
    short loin leberkas pig.</p>
  <p>Bacon ipsum dolor sit amet corned beef turducken jowl chuck, biltong turkey capicola bresaola. Pork strip steak prosciutto ball tip flank frankfurter ham filet mignon jowl pancetta. Shankle kielbasa salami jerky filet mignon kevin. Shankle beef ribs
    ham hock porchetta venison pork tail sausage meatball. Short loin shoulder bresaola frankfurter ball tip spare ribs andouille shank salami ham tongue beef pork chop kevin. Beef turducken biltong sirloin capicola, ribeye short ribs brisket swine shank
    short loin leberkas pig.</p>
  <p>Bacon ipsum dolor sit amet corned beef turducken jowl chuck, biltong turkey capicola bresaola. Pork strip steak prosciutto ball tip flank frankfurter ham filet mignon jowl pancetta. Shankle kielbasa salami jerky filet mignon kevin. Shankle beef ribs
    ham hock porchetta venison pork tail sausage meatball. Short loin shoulder bresaola frankfurter ball tip spare ribs andouille shank salami ham tongue beef pork chop kevin. Beef turducken biltong sirloin capicola, ribeye short ribs brisket swine shank
    short loin leberkas pig.</p>
  <p>Bacon ipsum dolor sit amet corned beef turducken jowl chuck, biltong turkey capicola bresaola. Pork strip steak prosciutto ball tip flank frankfurter ham filet mignon jowl pancetta. Shankle kielbasa salami jerky filet mignon kevin. Shankle beef ribs
    ham hock porchetta venison pork tail sausage meatball. Short loin shoulder bresaola frankfurter ball tip spare ribs andouille shank salami ham tongue beef pork chop kevin. Beef turducken biltong sirloin capicola, ribeye short ribs brisket swine shank
    short loin leberkas pig.</p>
  <p>Bacon ipsum dolor sit amet corned beef turducken jowl chuck, biltong turkey capicola bresaola. Pork strip steak prosciutto ball tip flank frankfurter ham filet mignon jowl pancetta. Shankle kielbasa salami jerky filet mignon kevin. Shankle beef ribs
    ham hock porchetta venison pork tail sausage meatball. Short loin shoulder bresaola frankfurter ball tip spare ribs andouille shank salami ham tongue beef pork chop kevin. Beef turducken biltong sirloin capicola, ribeye short ribs brisket swine shank
    short loin leberkas pig.</p>

  <p>Cow ground round ball tip ribeye swine pancetta shank pork loin strip steak bacon pastrami andouille tail sausage short ribs. Porchetta shank pastrami frankfurter ham filet mignon spare ribs doner ground round t-bone venison turkey chicken bacon. Jowl
    landjaeger ribeye, kielbasa tenderloin filet mignon tri-tip shankle ball tip chuck pancetta swine. Pork belly sausage filet mignon short ribs, chuck salami bacon. Jerky fatback tail tongue beef shank.</p>

  <p>IE is trolling me.</p>
</section>
<footer>
  <div class="input" contenteditable="true">INPUT HERE. When I jump lines I want the footer to resize and the main content to show a scroll bar.</div>
</footer>

score 0 · Accepted Answer · edited May 23 '17 at 12:23

I found your answer here: Flexbox and vertical scroll in a full-height app using NEWER flexbox api

You need some minor adjustments 1) create a wrapping container 2) use height: 100% on body 3) set section with flex: 1 1 auto

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}
section {
  flex: 1 1 auto;
  overflow-y: auto;
}

codepen

CSS flex boxes, dynamic footer height and scrollable main body

1 Answers1