title: CSS Scrollable content within flexbox child
body: <p>I'm trying to design layout for single page application. The layout should fill full page height and width without scrolling. Here is layout design:</p>
  
  <p><img src="https://i.stack.imgur.com/GXLMT.png" alt="Layout figure"></p>
  
  <p>All blocks contain a bit of information, all they have fixed height, there is only one block which contains large list of data and it should be scrollable (it is purple on picture).</p>
  
  <p>Currently, I'm using flexible boxes for all UI blocks, but I can't make purple block scrollable. How to make purple block remain flexible (i.e. occupy all available space within blue block), and make its content scrollable (i.e. content should not purple block body).</p>
  
  <p>Maybe there is some better solution (I believe flexible boxes serve a bit another purposes)?</p>