title: Removing extra spacing on a flexbox with wrapped children?
body: <p>Whenever the items inside a flexbox wrap, they tend to stretch the flexbox, leaving extra space on a side. It only happens when items wrap. How do I get rid of that extra spacing?</p>
  
  <p>Screenshot of the issue
  <a href="https://i.stack.imgur.com/vzqmH.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/vzqmH.jpg" alt="enter image description here"></a></p>
  
  <p>What I want it to do
  <a href="https://i.stack.imgur.com/XXInT.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/XXInT.jpg" alt="enter image description here"></a></p>
  
  <h2>Code</h2>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
    &lt;div class="red"&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="green"&gt;
      &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body &gt; div {
    display: flex;
    width: 34rem;
    justify-content: space-between;
    border: 1px solid black;
  }
  
  body &gt; div &gt; div {
    display: flex;
    flex-flow: row wrap;
  }
  
  body &gt; div &gt; div.red {
    background: rgba(255, 0, 0, .1);
  }
  
  body &gt; div &gt; div.green {
    background: rgba(0, 255, 0, .1);
    flex-shrink: 0;
  }
  
  body &gt; div &gt; div &gt; div {
    margin: 1rem;
    height: 5rem;
    width: 5rem;
    background: rgba(0, 0, 0, .1);
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/5mL3dm3d/1/" rel="noreferrer">See an example on JSFiddle</a></p>