CSS break child after nth

Question

I am trying to break a certain number of elements by half.

For example:

I have a wrapper around many items, and i want to break them in two columns.

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}

.flex-container {
flex-basis: 75%;
}

.flex-con {
  flex-basis: 25%;
}

#bottom {
    max-width: 100%;
    color: #fff;
    background-color: #205BA1;
    display: flex;
    padding: 1rem;
    margin-right: 0 !important;
    flex-wrap: wrap; 
    }
    
    .item:nth-child(5n) {
        page-break-after: always;
    }

<div id="bottom">
    <div class="flex-container">
        <div id="wrapper">
            <div class="item">a</div>
            <div class="item">b</div>
            <div class="item">c</div>
            <div class="item">d</div>
            <div class="item">e</div>
            <div class="item">f</div>
            <div class="item">g</div>
            <div class="item">h</div>
            <div class="item">i</div>
            <div class="item">j</div>
            <div class="item">k</div>
            <div class="item">l</div>
         </div>
     </div>
     <div class="flex-con">
         <div>stuff here</div>
     </div>
 </div>

I want to break the items based on the count or something like that, so that i have always and only !2! columns of items in the flex-container class- however, the number of items changes each week (+ 1 per week)

I could change the nth-child every week but i want i dont want to do that if it would be possible

.item:nth-child(5n) {
    page-break-after: always;
}

Ive added an Image to kind of show what i want it to look like i just want them in two columns inside the first flex-container

item a item b
item c item d
item e item f

thanks in advance

Answer 1

Simply use

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.flex-container {
  flex-basis: 75%;
}

.flex-con {
  flex-basis: 25%;
}

#bottom {
  max-width: 100%;
  color: #fff;
  background-color: #205BA1;
  display: flex;
  padding: 1rem;
  margin-right: 0 !important;
  flex-wrap: wrap;
}

.item:nth-child(5n) {
  page-break-after: always;
}

<div id="bottom">
  <div class="flex-container">
    <div id="wrapper">
      <div class="item">a</div>
      <div class="item">b</div>
      <div class="item">c</div>
      <div class="item">d</div>
      <div class="item">e</div>
      <div class="item">f</div>
      <div class="item">g</div>
      <div class="item">h</div>
      <div class="item">i</div>
      <div class="item">j</div>
      <div class="item">k</div>
      <div class="item">l</div>
    </div>
  </div>
  <div class="flex-con">
    <div>stuff here</div>
  </div>
</div>

Answer 2

This code below, achieves the goal as explicitly required in the question, making rendering two columns, that orient from left to right:

A B
C D
E F
. .
. .

.item{ float: left; width: 50px; }
.item:nth-child(2n + 1){ clear:left }

<div id="wrapper">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">d</div>
  <div class="item">e</div>
  <div class="item">f</div>
  <div class="item">g</div>
  <div class="item">h</div>
  <div class="item">i</div>
  <div class="item">j</div>
  <div class="item">k</div>
  <div class="item">l</div>
</div>

Answer 3

Look at my codepen, is this what you are looking for? https://codepen.io/agentbraun/pen/zYKQxGJ

#wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 50px;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -moz-column-fill: balance;
       column-fill: balance;
}