Make first element full width and the rest in one line [duplicate] - html

Question

This question already has answers here:
First-child full-width in Flexbox
(4 answers)
Closed 5 years ago.
I'm trying to create a kind of sub-grid which looks like this:
The first element should be full width and the rest have to be in the same line (same width each one) no matter how many items are present.
My attempt:
HTML
<div class="flex-container">
<div class="flex-item">I'm the biggest!</div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
CSS
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container .flex-item {
flex: 1;
}
.flex-container .flex-item:first-child {
width: 100%;
}
I'm a newbie in flex, so, in my newbie abstraction, in theory this should work, but it doesn't. It makes all the .flex-item being in the same line with the same width (which I want to happen but only with the :not(:first-child) flex dudes).

Answer 1

This will try to keep all your subordinate items on one row.
See notes in CSS
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.flex-container .flex-item {
background-color: #d94a6a;
flex: 1 1 0; /* for 2nd line to not wrap */
margin: 0 1px;
overflow: hidden; /* for 2nd line to not wrap */
min-height: 75px;
text-align: center;
-webkit-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
}
.flex-container .flex-item:nth-child(1) {
background-color: #3b5bb2;
flex-basis: 100%; /* make first take full width */
min-height: 400px;
margin-bottom: 20px;
}
<div class="flex-container">
<div class="flex-item">I'm the biggest!</div>
<div class="flex-item">#2</div>
<div class="flex-item">#3</div>
<div class="flex-item">#4</div>
<div class="flex-item">#5</div>
<div class="flex-item">#6</div>
<div class="flex-item">#7</div>
</div>