Столбец сверху вниз, слева направо и автоматическая регулировка ширины. ⇐ CSS

[Anonymous]

У меня есть такая структура

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

.flex #left {
min-height: 230px;
}

#files {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 10px;
position: relative;
user-select: none;
width: 100%;
}

#files li {
flex: 1;
max-width: 250px;
min-width: 200px;
width: 100%;
}

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

[list]
[*]1
[*]2
[*]3
...
[/list]

Итак, отображаются слева направо вправо, затем сверху вниз.
Я бы хотел, чтобы они отображались сверху вниз, а затем слева направо.
Я не знаю заранее не знаю количество li.
Мне бы хотелось, чтобы в нем было максимум 4 столбца и чтобы имеет фиксированную высоту, например 400 пикселей, с вертикальной полосой прокрутки, которая появляется при необходимости в зависимости от количества li.
Ширина может измениться, например, если пользователь уменьшит ширину окна браузера.
Количество столбцов должно адаптироваться соответствующим образом, зная, что каждый столбец максимальная ширина: 250 пикселей; минимальная ширина: 200 пикселей;

Подробнее здесь: https://stackoverflow.com/questions/790 ... adjustment