title: Scrollable full height div using flexbox
body: <p>I'm trying to create a layout as shown below.</p>
  <p><a href="https://i.stack.imgur.com/PKlsC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PKlsC.png" alt="enter image description here" /></a></p>
  <p>The problem is the left menu. I want to use full height - I got that working. The problem is when there are too many items. Then I want to have an overflow scroll. So the full page should always fill the full screen, but the page should never be scrollable. Just the Left Menu part.</p>
  <p>I have a CodePen going on <a href="https://codepen.io/riha/pen/PoGdBYE" rel="nofollow noreferrer">here</a>. It work as I want it, until there are too many items in the menu and I can get overflow scrolling working in a good response way.</p>
  <p>Uncomment the items = 40 line in the javascript window to see the issue.</p>
  <pre><code>items = 4 // looks ok
  //items = 40 // too long
  </code></pre>
  <p>Is there a good technique to get this working?</p>