CSS make flex wrapped elements not exceed their siblings width - html

Question

I'm stuck on problem with stretching flexes.
I have flexbox div with items. These items can stretch to full width and have min-width property, so that 3-4 elements can fit in large screens, and 1-2 in small.
I want to make their widths equal, but the problem is that wrapped items are wider if their quantity is less than on top elements.
Attached below my current result and expected behavior. How can I make it?
.items {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.item {
min-width: 400px;
border: 1px solid black;
margin: 0;
height: 200px;
flex-grow: 1;
}
<div class="items">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
Thanks!
Update 02.05.2016
Thanks to #vals I came up with percentage width solution for different screen sizes. (But it seems I'm having some tiny problem with 33% width elements, in which 1% empty space is left around them xD)
.items {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
align-items: center;
}
#media only screen and (max-width: 820px) {
.item {
width: 100%;
}
}
#media only screen and (min-width: 821px) and (max-width: 1220px) {
.item {
width: 50%;
}
}
#media only screen and (min-width: 1221px) and (max-width: 1620px) {
.item {
width: 33%;
}
}
#media only screen and (min-width: 1621px) and (max-width: 2020px) {
.item {
width: 25%;
}
}
.item {
box-sizing: border-box;
border: 1px solid black;
margin: 0;
height: 200px;
}
<div class="items">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>

Answer 1

This is a complex case, you need media queries adapted to you specific layout and number of elements present.
I have color-coded the different media queries result to help identify them
And also, three extra divs inside the items element to help with the dimensions
.items {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.item {
min-width: 400px;
border: 1px solid black;
margin: 0;
height: 100px;
flex-grow: 2;
}
.filler1, .filler2, .filler3 {
height: 0px;
background-color: lightgreen;
}
#media only screen and (max-width: 820px) {
/* one item per line */
.filler2, .filler3 {display: none;}
.item {background-color: yellow;}
}
#media only screen and (min-width: 821px) and (max-width: 1220px) {
/* 2 items per line */
.item:nth-last-child(4) {
order: 9;
background-color: red;
}
.filler1 {
margin-right: 100%;
}
.filler2 {
min-width: 200px;
flex-grow: 1;
order: 4;
}
.filler3 {
min-width: 200px;
flex-grow: 1;
order: 14;
}
}
#media only screen and (min-width: 1221px) and (max-width: 1620px) {
.item:nth-last-child(4), .item:nth-last-child(5) {
order: 9;
background-color: green;
}
.filler1 {
margin-right: 100%;
}
.filler2 {
min-width: 200px;
flex-grow: 1;
order: 4;
}
.filler3 {
min-width: 200px;
flex-grow: 1;
order: 14;
}
}
#media only screen and (min-width: 1621px) and (max-width: 2020px) {
.item:nth-last-child(4) {
order: 9;
background-color: lightblue;
}
.filler1 {
margin-right: 100%;
}
.filler2 {
min-width: 400px;
flex-grow: 2;
order: 4;
}
.filler3 {
min-width: 400px;
flex-grow: 2;
order: 14;
}
}
<div class="items">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="filler1"></div>
<div class="filler2"></div>
<div class="filler3"></div>
</div>