title: How to dynamically Break FlexBox Column to start a new column
body: <p>I have a dynamic list of items (containing text) placed column-wise which I need to break after every <strong>5<sup>th</sup> item</strong>.</p>
  <p><a href="https://i.stack.imgur.com/4FFHK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4FFHK.png" alt="Dynamic FlexBox multi-column" /></a></p>
  <p>I have only 2 constraints:</p>
  <ol>
  <li>Width of each Item is <code>100px</code> - if the text overflows, it must wrap around to next line.</li>
  <li>Each column must contain at-most <code>5</code> Items.</li>
  </ol>
  <p>The number of items are <strong>NOT</strong> known. If there are less than 5 items in the list they can be kept in the same column.
  If there are more then they must wrap to next columns. <a href="https://i.stack.imgur.com/UNTj2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UNTj2.png" alt="Dynamic FlexBox multi-column" /></a></p>
  <p>Since I do not know the number of items or their content - I cannot set a <code>height</code> property to the parent <code>list</code> container.</p>
  <p>So how can I force the parent container to break after every 5<sup>th</sup> item into a next column.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list {
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  
  .item {
    border: 1px solid red;
    width: 100px;
    overflow-wrap: anywhere;
  }
  
  .item:nth-child(5n) {
    border: 1px solid blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="list"&gt;
      &lt;div class="item"&gt;Text 1&lt;/div&gt;
      &lt;div class="item"&gt;Text 2&lt;/div&gt;
      &lt;div class="item"&gt;Long Text 3 must wrap to next line&lt;/div&gt;
      &lt;div class="item"&gt;Text 4&lt;/div&gt;
      &lt;div class="item"&gt;Text 5&lt;/div&gt;
      &lt;div class="item"&gt;Text 6&lt;/div&gt;
      &lt;div class="item"&gt;Text 7 is also long&lt;/div&gt;
      &lt;div class="item"&gt;Text 8&lt;/div&gt;
      &lt;div class="item"&gt;Text 9&lt;/div&gt;
      &lt;div class="item"&gt;Text 10&lt;/div&gt;
      &lt;div class="item"&gt;Text 11&lt;/div&gt;
      &lt;div class="item"&gt;Text 12 is last item&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>