With flex-flow: row wrap and flex: auto, how do I set the width of the last elements in the row like everything else?

Question

css

There is markup on flexbox for elements:

.flexbox-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.item {
    flex: auto;
    -webkit-flex: auto;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

But if there are fewer elements in the last row than in others, then they become wider.
Is it possible to make them all the same width?
Example: https://jsfiddle.net/rz841oy0/
Solution:
You need to duplicate at the end of item.

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

Answer 1

The easiest option

.item {
  max-width: 100px;
}

In general, here are examples of grids on flex: philipwalton.github.io/solved-by-flexbox/demos/grids and flexboxgrid.com

Answer 2

Remove the flex:auto property from .item