Как сделать так, чтобы элементы li переносились на новую строку при достижении края окна?

Question

[Никита Гуриев]

Использовать что-то другое кроме ul, li не получится. Это кастомизация CMS. Нужно какие-то свойства задать, чтобы элементы переносились на новую строку, когда достигают границы окна, но какие именно? Уже многое перепробовал.
CodePen:

Исходный код

CSS

ul {
	display: flex;
}
li {
	margin: 0 16px 0 16px;
}

HTML

<ul>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
</ul>

Answer 1

[h4mpy]

flex-wrap: wrap для ul

Answer 2

[Baron Grafovich]

Можешь задать определённый размер блоку, например width: 50%; если li не переходить на следующую строку то тогда уже добавляешь flex-wrap: wrap;