title: scrollable html panel with scroll buttons using css and flexbox
body: <p>I'm having layout difficulties when creating a scrollable panel using css and flexbox.  I saw this one (<a href="http://jsfiddle.net/5A9c9/" rel="nofollow">http://jsfiddle.net/5A9c9/</a>)</p>
  
  <p>that works well as long as no elements are added into the divs.  When I modify that and add one line (line 11 in <a href="http://jsfiddle.net/5A9c9/7/" rel="nofollow">http://jsfiddle.net/5A9c9/7/</a>), the layout is completely messed up.  It could be almost any other tag and it still gets messed up.</p>
  
  <pre><code>`&lt;!-- adding this line messes it up --&gt;
  &lt;p&gt;abcd&lt;/p&gt;`
  </code></pre>
  
  <p>How do I get this to lay itself out properly?</p>
  
  <p>p.s. or any other full working examples of such a panel using only css and flexbox?  </p>
  
  <p>Edit:
  One of the issues I hit with the scrollable area using flexbox was that the elements were getting crushed and force-fitted into the area, and therefore it had no chance to scroll.</p>