css - How do I make a wrapped flexbox's content grow equally? -

in flexbox wrapping enabled, flex-grow property doesn't behave quite way i'd like: growth determined row row. here 2 samples, 1 without flex-grow, 1 flex-grow:

.container {    border: dotted 1px green;    display: flex;    flex-wrap: wrap;    width: 400px;  }  .container > div {    background-color: red;    height: 100px;    width: 100px;    margin: 10px;  }  .container.grow > div {    flex-grow: 1;  }

<div class="container"><div></div><div></div><div></div><div></div><div></div></div>    <div class="container grow"><div></div><div></div><div></div><div></div><div></div></div>

i'd child div elements have same width, in first container, still allow width expand fill container. in other words, i'd child div elements have size that's used in first row of second container. flexbox have option allows that? if not, css provide other alternative?

note: i'm using fixed widths here simple example. both container , child width dynamic in real page.

chris wright's flexbox adventures shows seems work (look "source ordering"), isn't general solution. uses @media min-width dynamically alter width of contained items (setting flex-basis percentage). making work requires knowing when content wrap. i'm trying use flex-wrap don't have worry it, can let browser make determination me.

it seems it's possible working creating filler items have same width actual content, height of 0 become invisible after last content row. enough filler items have created fill last content row, creating more required harmless. i've created many filler items content items.

it gets bit tricky, because filler items could end on first row if container large enough. using additional layer of div elements, , giving them minimum width of 20% (based on 5 content boxes), forces them on second line in case.

animated demo (in chrome , firefox, anyway):

.container {    border: dotted 1px green;    display: flex;    flex-wrap: wrap;    animation: resize 10s linear infinite;  }  @keyframes resize {    0%, 100% { width: 120px; }    50% { width: 1000px; }  }  .container > div {    flex: 1 0 auto;    min-width: 20%;  }  .container-item {    background-color: red;    height: 100px;    min-width: 100px;    margin: 10px;  }  .container-filler {    min-width: 100px;    margin: 0 10px;  }

<div class="container">    <div><div class="container-item"></div></div>    <div><div class="container-item"></div></div>    <div><div class="container-item"></div></div>    <div><div class="container-item"></div></div>    <div><div class="container-item"></div></div>    <div><div class="container-filler"></div></div>    <div><div class="container-filler"></div></div>    <div><div class="container-filler"></div></div>    <div><div class="container-filler"></div></div>    <div><div class="container-filler"></div></div>  </div>