Как сделать перенос блока во flexbox?

Question

[MFNIK]

Доброй ночи! Столкнулся с интересной задачкой.
Пишу шаблон на bootstrap3, соответственно применяю класс данного фреймворка.
Требуется создать 3 колонки, одна в два раза больше других, если это требуется...
Изначально код:

<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>

Известно что первая колонка (left-item) будет содержать примерно 20-30 пунктов, но не сразу, вторая около 10-15 (center-item), третья около 7-8 (right-item).
Изначально макет будет состоять из трех колонок, равных по ширине. Вот стили.

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

Так должно быть пока количество li - элементов в первой колонке не превысит по высоте, и пункты должны передвинутся правее, разширив колонку родителя в 2 раза, а вторую (center-item) оставить автоматической ширины, сколько останется, а вот третья колонка должна перенестись на следующую строку, т.к. первая колонка увеличилась в размере.
Пытаюсь работать с данными стилями, все в принципе получается, но почему то не работает перенос третьей колонки на следующую строчку.

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

А соответственно стили списков.

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

PS: кстати высота не работает от родителя .main-block, каждому ul нужно присваивать высоту почему то....
Помогите как решить?

Comments

[profesor08]

где рабочий пример на фидле и желаемый результат?

[Alex ALex]

Лучше скиньте проект в опенкоде...А там посмотрим че как..

[MFNIK]

https://codepen.io/mfnik/pen/PVWjXw
Нужно что бы 1 колонка при добавлении в нее списков превышая колонку по высоте, расширялась перенося списки в право, при этом третья колонка должна перенестись на следующую строку.

Списки будут добавлятся из админки.

[MFNIK]

Что ни кто не подскажет в каком направлении двигаться??

[Ankhena]

Вероятнее всего, в сторону js

[MFNIK]

Ankhena, ну я уже начал над этим работать, что то типа

if ($("li.li-elem").size() > 10 && $("li.li-elem").size() < 20  ) {
	$('div.left-block').addClass("add-l");
	$('div.center-block').addClass("add-c");
	$('div.right-block').addClass("add-r");
}

[Ankhena]

MFNIK, может не size, а высота? Или все элементы гарантировано короткие и занимают только 1 строку без переносов?

[MFNIK]

Ankhena, можно попробовать, спасибо!