Column top to bottom, left to right and automatic width adjustment

I have this code:

.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%;}

<div class="flex"><div id="left"><ul id="files"><li>1</li><li>2</li><li>3</li>      ...</ul></div></div>

So, the <li> are displayed from left to right, then from top to bottom, but I would like them to be displayed from top to bottom, then from left to right.

I don't know in advance the number of li.

I would like it to be on 4 columns maximum and that the <div id="left"> has a fixed height of, for example, 400px, with a vertical scrollbar that appears if necessary according to the number of li.

The width of <div id="left"> can change, for example if the user decreases the width of his browser window.

The number of columns should adapt accordingly, knowing that each column is max-width: 250px; min-width: 200px;