Flexbox ul li, как задать перенос списков?

Question

[MFNIK]

Добрый день, не могу разобраться как задать перенос списков если display:flex;
Есть блок div, он имеет следующие стили: height: 200px;
Внутри его список который имеет следующие стили:

ul {
display: flex;
flex-wrap: wrap;
flex-direction: column;

Почему списки не переносятся как показано на рисунке, помогите решить проблему.

Comments

[MFNIK]

Разобрался!
Нужно контейнеру flex добавлять высоту, а не блоку где находится контейнер.
В данном случае

ul {
height: 200px;
}

Answer 1

[yadscreech]

Ошибка где-то в другом, потому что ты сделал все правильно, на кодпене все работает. (Ещё ты вставил элемент кода, но там нет закрывающейся скобки"}", она у тебя в документе точно есть?) https://codepen.io/screech/pen/ZmJJqo

Comments

[MFNIK]

Да точно есть! Я это писал, что бы понятно было, а не копировал.
Тут
вы все правильно сделали. Я ранее делал так:

<div style="display: flex;">
<ul>
<li>Какой то текст</li>
<li>Какой то текст</li>
<li>Какой то текст</li>
<li>Какой то текст</li>
</ul>
</div>

и ждал что элементы li примут display: flex, а правильно присваивать елементу Ul display:flex; тогда все работает как положено!
Проскочил короче 1 уровень)))

Answer 2

[vzmaze]

Столкнулся с той же проблемой.
Нужну указать свойство width для самого ul.
У меня всё заработало.