Flex-wrap не переносит элементы на следующую строку ⇐ CSS

[Anonymous]

Я пытаюсь заставить работать макет столбцов с помощью flexbox. Я столкнулся с проблемой, когда пытался перенести каждый столбец текста на следующую строку, когда в нем больше нет места. Мою проблему можно увидеть на изображении ниже.


Я пытался установить flex: 1 250px, насколько я понимаю, он должен установить flex-basis равным 250px, что означает, что если пространство недостаточно велик для элемента размером 250 пикселей, этот элемент должен переноситься на следующую строку, но результат, который я получил, был странным: удалось перенести только один элемент.


То, чего я пытаюсь достичь, похоже на изображение ниже: куда каждый элемент должен переноситься, если недостаточно места.


Я пытался найти ответы на этот вопрос, но у большинства из них возникают проблемы с установкой фиксированной ширины, которой у меня нет, и я не могу понять, в чем проблема это...
Мои коды:

Код: Выделить всё

.list {
display: flex;
flex-wrap: wrap;
}

.list-item {
flex: 1;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: red solid 1px;
}

Код: Выделить всё

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.

Спасибо

Подробнее здесь: https://stackoverflow.com/questions/787 ... -next-line