Столбец сверху вниз, слева направо и автоматическая регулировка ширины. ⇐ 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< /code>.
Я бы хотел, чтобы в нем было максимум 4 столбца и чтобы имел фиксированную высоту, например, 400 пикселей. , с вертикальной полосой прокрутки, которая появляется при необходимости в зависимости от количества li.
Ширина может измениться, например, если пользователь уменьшит ширину окна своего браузера.
Количество столбцов должно адаптироваться соответствующим образом, зная, что максимальная ширина каждого столбца: 250 пикселей; минимальная ширина: 200 пикселей;

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