title: Flexbox: How to stretch row's elements to full width?
body: <p>I have a flexbox grid of random width images:</p>
  
  <p><a href="https://i.stack.imgur.com/pfPeU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pfPeU.jpg" alt="enter image description here"></a></p>
  
  <p>I would like to stretch elements of each row to full width in order to get rid of white-space - how can I achieve that with CSS?<br>
  <code>justify-content</code> doesn't seem to help much. I have read about some JavaScript techniques but I would like to avoid it if possible.</p>
  
  <p><strong>[Edited] Expected result</strong>: <a href="https://ed-lea.github.io/jquery-collagePlus/example.html" rel="nofollow noreferrer">example</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .grid .grid-item {
    width: auto;
    display: inline-block;
    vertical-align: bottom;
    float: none;
    margin: 1px;
    overflow: hidden;
  }
  .grid .grid-item .grid-in {
    padding: 0;
    width: auto;
    height: 190px;
    vertical-align: bottom;
  }
  .grid img {
    max-width: 100%;
    width: 100%;
    height: auto;
    padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/190x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/250x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/100x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/190x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/250x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/190x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/100x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/190x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/250x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/190x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="grid-in"&gt;
        &lt;img src="http://placehold.it/100x190" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>