title: CSS Flexbox first vertical list then start multiple columns once vertical space runs out
body: <p>Is it possible to set flexbox to first use vertical space then start multiple columns once vertical space runs out. If there still isn't enough space, then use vertical scroll.</p>
  <pre><code>#box {
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 200px);
    max-width: calc(100% - 100px);
    flex-wrap: wrap;
    overflow: auto;
  }
  .item {
    background: gray;
    width: 50px;
    height: 50px;
  }
  </code></pre>
  <p>My issue is that this will scroll horizontally instead of vertically.</p>