DIV within flex container pushing down entire row - css

Question

I'm working on an angular/js app using directives and this particular flex-container uses divs(directives) which may contain one or more items. When a directive includes 3 items for the flexbox, if it isn't a perfect fit for all items in that directive, it pushes the entire row down instead of say leaving one on the top line and putting the rest on the 2nd line. It will instead leave an empty space on top and push all 3 to the 2nd line. The reason for directives in this case is for reuse and grouping common functionality together.
To simplify, this demonstrates the issue I'm seeing just with using divs. Looking at the example if you resize the window you'll see that as soon as there is not enough room to fit the 6th bubble, all 3 in that div get pushed to the second row.
example on codepen
dl,
dt,
dd {
/* resetting definition list styling */
margin: 0;
padding: 0;
}
.bubble {
display: block;
border-radius: 1rem;
background: rgb(52, 58, 64);
color: rgb(255, 255, 255);
text-align: center;
font-weight: 600;
padding: 1rem;
width: 10rem;
height: 10rem;
}
.flex-container {
display: inline-flex;
flex-wrap: wrap;
}
.flex-container div {
display: inline-flex;
}
<div class="flex-container">
<div>
<dl class="bubble">1</dl>
</div>
<div>
<dl class="bubble">2</dl>
</div>
<div>
<dl class="bubble">3</dl>
</div>
<div>
<dl class="bubble">4</dl>
<dl class="bubble">5</dl>
<dl class="bubble">6</dl>
</div>
</div>
Is it possible for me to get that div with 3 items to start after the 3rd bubble and wrap only those that don't fit to the second line?

Answer 1

update:
Use
.flex-container div {
display: contents;
}
Instead of
.flex-container div {
display: inline-flex;
}
display: contents basically ignores the element and makes the element's parent, or flex-container in this case, the parent of the children or the dl tags here. This only affects the layout. The children still keep any of the styling inherited from their wrapper element.

Answer 2

Showing Roya's suggestion here which does the trick...
dl, dt, dd {
/* resetting definition list styling */
margin: 0;
padding: 0;
}
.bubble {
display: block;
border-radius: 1rem;
background: rgb(52, 58, 64);
color: rgb(255, 255, 255);
text-align: center;
font-weight: 600;
padding: 1rem;
width: 10rem;
height: 10rem;
margin-right: 2rem;
margin-top: 1rem;
}
.flex-container {
display: inline-flex;
flex-wrap: wrap;
}
.flex-container div {
display: contents;
}
<div class="flex-container">
<div><dl class="bubble">1</dl></div>
<div><dl class="bubble">2</dl></div>
<div><dl class="bubble">3</dl></div>
<div><dl class="bubble">4</dl></div>
<div>
<dl class="bubble">5</dl>
<dl class="bubble">6</dl>
<dl class="bubble">7</dl>
</div>
</div>