title: How can I get overflow:scroll inside a flex box
body: <p>I have built this layout:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;style type="text/css"&gt;
  html, body{
    margin:0;
    padding:0;
    height:100%;
  }
  .flex{
    display:flex;
    flex-direction:column;
    min-height:50%;
    width:33.3333%;
    float:left;
    border:1px solid #C8C7CC;
    box-sizing:border-box;
    overflow:scroll;
  }
  .flex:last-child{
    width:66.6666%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="flex"&gt;
      &lt;ul&gt;
          &lt;li&gt;1&lt;/li&gt;
          &lt;li&gt;2&lt;/li&gt;
          &lt;li&gt;3&lt;/li&gt;
          &lt;li&gt;4&lt;/li&gt;
          &lt;li&gt;5&lt;/li&gt;
          &lt;li&gt;6&lt;/li&gt;
          &lt;li&gt;7&lt;/li&gt;
          &lt;li&gt;8&lt;/li&gt;
          &lt;li&gt;9&lt;/li&gt;
          &lt;li&gt;10&lt;/li&gt;
          &lt;li&gt;11&lt;/li&gt;
          &lt;li&gt;12&lt;/li&gt;
          &lt;li&gt;13&lt;/li&gt;
          &lt;li&gt;14&lt;/li&gt;
          &lt;li&gt;15&lt;/li&gt;
          &lt;li&gt;16&lt;/li&gt;
          &lt;li&gt;17&lt;/li&gt;
          &lt;li&gt;18&lt;/li&gt;
          &lt;li&gt;19&lt;/li&gt;
          &lt;li&gt;20&lt;/li&gt;
          &lt;li&gt;21&lt;/li&gt;
          &lt;li&gt;22&lt;/li&gt;
          &lt;li&gt;23&lt;/li&gt;
          &lt;li&gt;24&lt;/li&gt;
          &lt;li&gt;25&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="flex"&gt;
  
  &lt;/div&gt;
  &lt;div class="flex"&gt;
  
  &lt;/div&gt;
  &lt;div class="flex"&gt;
  
  &lt;/div&gt;
  &lt;div class="flex"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to put long lists of things inside each flex box. I need them to scroll individually and at the same time fill all the available space in the browser window. I have managed the latter but how can I get a flex box to scroll instead of grow when overflowed?</p>