flex-wrap: wrap; flex-direction: column; - flexbox

Question

Is the result even possible with ?
enter image description here
Is the result of the picture even possible?
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
background: #e2eaf4;
padding: 10px;
height: 500px;
}
.child {
display: inline-block;
font-family: "Open Sans", Arial;
font-size: 20px;
color: #FFF;
text-align: center;
background: #3794fe;
border-radius: 6px;
padding: 20px;
margin: 12px;
}
.child {
width: 300px;
}
.child:first-child {
width: 100%;
}
.child:not(:first-child) {
flex: 1;
}
<ul class="container">
<li class="child">Child 1 </li>
<li class="child">Child 2</li>
<li class="child">Child 3 </li>
<li class="child">Child 4 </li>
<li class="child">Child 5</li>
<li class="child">Child 6</li>
<li class="child">Child 7</li>
<li class="child">Child 8</li>
<li class="child">Child 9</li>
<li class="child">Child 10</li>
<li class="child">Child 11</li>
</ul>
I've been trying this for some Zeot but can't get it. Can someone help?

Answer 1

Ich habe eine Lösung gefunden:
ul {
-webkit-columns: 4;
-moz-columns: 4;
columns: 4;
}
li:first-child {
column-span: all;
}

Answer 2

I don't think you can do it with only one flex container.
Here is an example of keeping the same HTML and doint it with grid layout. You still have the wrapping effect if you add or remove list items but there are a fixed number of columns (here 4).
.container {
display: grid;
grid-template-rows: repeat(auto-fit, 100px);
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: column;
justify-content: space-between;
background: #e2eaf4;
padding: 10px;
height: 500px;
}
.child:first-child {
grid-column: 1 / -1;
}
.child {
display: inline-block;
font-family: "Open Sans", Arial;
font-size: 20px;
color: #FFF;
text-align: center;
background: #3794fe;
border-radius: 6px;
padding: 20px;
margin: 12px;
}
<ul class="container">
<li class="child">Child 1</li>
<li class="child">Child 2</li>
<li class="child">Child 3 </li>
<li class="child">Child 4 </li>
<li class="child">Child 5</li>
<li class="child">Child 6</li>
<li class="child">Child 7</li>
<li class="child">Child 8</li>
<li class="child">Child 9</li>
<li class="child">Child 10</li>
<li class="child">Child 11</li>
</ul>