Flexbox grid last row wrong margins between items - css

Question

I'm still experimenting with flexbox, but there's this case I can't solve.
I have this grid
<div class="wrapper">
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
With the following CSS:
.wrapper{
width:100%;
oveflow:hidden;
margin: 0;
padding:0;
}
.container {
width:100%;
display: flex;
flex: 1;
flex-flow: row wrap;
justify-content: space-between;
margin: 0;
}
.container .item {
display: block;
margin: 0 0 30px;
width: 29.666%;
}
But when I use this, items in the last row are rendered with a different "space between" them than the items in the previous row.
Look at this picture. This is what I get:
Trying to fix this, the only thing I can find is to set items' lateral margin as auto, like this
.container .item {
display: block;
margin: 0 auto 30px;
width: 29.666%;
}
But now, I have lateral margins between the items and the container border, like this:
Why does this happen?
Is there a way to solve this other than having negative lateral margins on the container div?

Answer 1

I didn't see the same result you did, but your margins looks a bit weird. I stripped it down to this:
.wrapper {
background: blue;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
}
.item {
background: yellow;
height: 30px;
width: 29.666%;
}
.item:not(:nth-last-child(-n+3)) {
margin-bottom: 30px;
}
<div class="wrapper">
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>

Answer 2

I see no defaults.
I did modify a bit your css code given so things can be seen and margin set only from second line:
.wrapper {
}
.container {
width: 100%;
background: #3197D3;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 0;
}
.container .item {
display: block;
width: 29.666%;
min-height: 100px;
background: #FFFF4D;
}
.item:nth-child(3) ~.item {
margin-top: 30px;
}
/* demo purpose*/
.container:before {
content:'.'attr(class);
width:100%;/* will span whole line */
padding:0.15em;
font-size:3em;
text-align:center;
color:white;
background:rgba(255,255,255,0.5);
}
.container .item {
display: flex;
}
.item:before {
content: attr(class);
margin: auto;
color:#3197D3;
font-size:2em;
}
<div class="wrapper">
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>