title: How to use flexbox inside a fixed container?
body: <p>I have a div that is <code>position: fixed;</code> within the viewport. Within this are a series of child elements that use <code>display: flex;</code> and I need a scrollable element to fill 100% of the height of the flexed element. The problem I am having is that because done of the parent elements of the scrollable element have a fixed height, so the scrollable element just pushed the bottom of the flexed element rather than scroll.</p>
  
  <p>Please see the following JSBin example. In this example, the blue block needs to extend to 100% the height of the red block, with the contents of the blue block still being scrollable. Needs to work in IE10+, latest Firefox and Chrome:</p>
  
  <p><a href="https://jsbin.com/terimim/edit?html,css,output" rel="nofollow noreferrer">https://jsbin.com/terimim/edit?html,css,output</a></p>