Use flexbox to wrap elements within flex elements to the next line - css

Question

I have a flexbox which contains "product boxes", which themselves contain thumbnails of the product. Is there a way I can wrap the thumbnails to the next line if the product box runs out of space on that line? I might have 10+ thumbnails per product so it might even need to run to the next two lines if needed, but they should still be "inline" with the reset of the products and not line-break at their beginning and end.
I don't have to use flexboxes, but I assume they might be useful for something like this. However I cannot figure this one out. Thanks!
.products {
display: flex;
background: yellow;
}
.product {
flex: 1;
margin: 1em;
background: magenta;
}
.thumbnail {
display: inline-block;
margin: 1em;
width: 100px;
height: 40px;
background: blue;
}
<div class="products">
<div class="product">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>
<div class="product">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>
</div>
What happens:
What I would like to happen:

Answer 1

With a few smaller adjustments you can achieve that, where to not group the thumbnails and use a wrapper to compensate for the top margin.
.products {
background: yellow;
}
.wrapper {
display: inline-flex; /* avoid collapsed margin on parent element */
flex-wrap: wrap;
margin-top: -15px; /* so margin only affect second row */
}
.products a {
padding: 1em;
margin-top: 15px;
background: magenta;
}
.products a:nth-child(3n) { /* target every 3rd element with a right margin */
margin-right: 15px;
}
.thumbnail {
width: 100px;
height: 40px;
background: blue;
color: white;
}
<div class="products">
<div class="wrapper">
<div class="thumbnail">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
</div>
</div>
As you mentioned in a comment, where the amount of thumbnails is arbitrary, it might not be practical to use nth-child to create the gap between the elements to be viewed as a group.
Based on that fact, and assumed you generate these thumbnails dynamically, you can either use a space element, or like below, add the margin inline.
.products {
background: yellow;
}
.wrapper {
display: inline-flex; /* avoid collapsed margin on parent element */
flex-wrap: wrap;
margin-top: -15px; /* so margin only affect second row */
}
.products a {
padding: 1em;
margin-top: 15px;
background: magenta;
}
.thumbnail {
width: 100px;
height: 40px;
background: blue;
color: white;
}
<div class="products">
<div class="wrapper">
<div class="thumbnail">1</div>
<div class="thumbnail">2</div>
<a style="margin-right: 15px" href="#"><div class="thumbnail">3</div></a>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<a style="margin-right: 15px" href="#"><div class="thumbnail">6</div></a>
</div>
</div>

Answer 2

Removed the two .product
then wrapped each thumbnail in an inline-block
the inline-blocks have a -2.5px left and right margins so they appear to belong to the same container when inline.
the outer block is display:table
every 3rd thumbnail has a .5em right margin (as suggested by LGSon)
Demo
*,
*::after,
*::before {
margin: 0;
padding: 0;
border: 0;
}
main {
display: table;
table-layout:fixed;
padding: .5em;
background: yellow;
}
b {
display: inline-block;
padding: 8px;
margin: 10px -2.5px;
background: magenta
}
.thumbnail {
width: 100px;
height: 40px;
background: blue;
}
main>div>b:nth-of-type(3n) {
margin-right: .5em
}
<main>
<div class="products">
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
<b><div class="thumbnail"></div></b>
</div>
</main>