How to wrap after nth element in flexbox column layout?

Question

I have been through a lot of posts on SO like How to specify an element after which to wrap in css flexbox? but all of them talk about row based layout. I have a fixed html being generate by a drupal. The task is to force any li after 3rd li into second column and keep height auto:

ul {
  background: gray;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 250px;
}
li {
  width: 100px;
}
li:nth-child(3) {
  flex-basis: 100%;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>Unlimited</li>
</ul>

So the first column needs to have fixed thee elements and all other elements should be pushed to the second column. Please note that the ul can't have fixed height, and the html structure can be changed only a little bit with twig in drupal.

Answer 1

Since you can't set fixed heights, flex won't work.

You need a height limit on the container to trigger a wrap.

However, the layout is pretty simple with Grid:

ul {
  display: grid;
  grid-auto-columns: 100px; /* width of grid columns */  
  grid-auto-flow: column;  /* directional flow of the items */
  width: 250px;
  background: gray;
}

li:nth-child(n + 4) {
  grid-column: 2; /* every item after the 3rd goes to column 2 */
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>Unlimited</li>
</ul>