title: div expands off screen instead of scrolling
body: <p>I inherited some code and I'm having trouble figuring out how to prevent a container with a large number of items is overflowing off the visible screen instead of a scroll bar appearing. I have made a jsfiddle to demonstrate the issue:</p>
  
  <p><a href="https://jsfiddle.net/yellavon/vo437qaL/" rel="nofollow noreferrer">https://jsfiddle.net/yellavon/vo437qaL/</a></p>
  
  <pre><code>&lt;div style="padding:20px;width:100%;"&gt;
    &lt;div style="border-width:1px;border-style:solid;width:100%;height:100%" class="k-widget"&gt;
      &lt;panel style="display: flex; position: relative; flex-direction: column; height: 100%; width: 100%;"&gt;
        &lt;panelrow style="position: relative; display: flex; flex-shrink: 0; padding: 5px; font-size: 1.3em;" class="bg-gray k-widget"&gt;Title &lt;/panelrow&gt;
  </code></pre>