How to wrap a block in flexbox?

Question

css

Goodnight! I ran into an interesting problem.
I am writing a template on bootstrap3, respectively, I apply the class of this framework.
It is required to create 3 columns, one twice as large as the others if required...
Initially the code is:

<div class="wrapper-item">
    <div class="container">
      <div class="main-block">
        <div class="left-item">
         <ul>
            <li>Пункт меню</li>
          </ul>
        </div>
        <div class="center-item">
          <ul>
            <li>Пункт меню</li>
          </ul>
        </div>
        <div class="right-item">
         <ul>
            <li>Пункт меню</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

It is known that the first column (left-item) will contain about 20-30 items, but not immediately, the second about 10-15 (center-item), the third about 7-8 (right-item).
Initially, the layout will consist of three columns of equal width. Here are the styles.

.main-block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
        height: 350px;
}

It should be like this until the number of li - elements in the first column exceeds the height, and the items should move to the right, expanding the parent column by 2 times, and leave the second (center-item) with an automatic width, how much remains, but the third column should move to the next line, because the first column has increased in size.
I'm trying to work with these styles, everything basically turns out, but for some reason the transfer of the third column to the next line does not work.

.left-item {
    flex: 2 1 auto;
}
.center-item {
    flex: 1 2;
}
.right-item {
  flex: 1 2;
}

And accordingly styles of lists.

.left-item ul {
    height: 350px;
    display: flex;
    -ms-align-items: stretch;
    align-items: baseline;
    flex-direction: column;
    align-content: baseline;
    flex-wrap: wrap;
}

PS: by the way, the height does not work from the .main-block parent, each ul needs to be assigned a height for some reason ....
Help how to solve it?