CodePen

HTML

            
              <header>Header</header>
<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>
<footer>Footer</footer>
            
          
!
via HTML Inspector

CSS

            
              ul {
  flex: 1;  
  min-height: 0;
  overflow: auto;
}



/* --------------------------------------- */

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: hsl(200,100%,90%);
}

li { padding: 20px; }

li:nth-child(odd) { background: hsl(200,100%,85%); }

header, footer { padding: 20px; background: hsl(0,0%,70%); }

body {
    display: flex;
  
    /* doesn't work without prefix */
    -webkit-flex-flow: column; 
    flex-flow: column;
    
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    background: hsl(0,0%,80%);
}

html { height: 100%; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // without min-height:0 on the <ul>, overflow scrolling doesn't work

// I first tried with flex: 1; that had no effect.
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................