title: Remove remaining space in flexbox with wrap
body: <p>How to reduce the width of the <code>flexbox</code> container with the wrap option so it takes only the width taken by its items ?</p>
  <p>The objective is not to see any green at the right of the yellow boxes (except for the margin set on the box item)</p>
  <p>NOTE: The <code>flexbox</code> with wrap can accept more than 2 items per row, in function of the window's size.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 900px; /* This width changes with the window's size */
    background-color: red;
  }
  
  .list {
    display: flex;
    flex-wrap: wrap;
    background-color: green;
    justify-content: flex-start;
  }
  
  .list .box {
    width: 300px; /* This will never change */
    height: 300px;
    margin: 0 32px 32px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
    &lt;h1&gt;Titre ici&lt;/h1&gt;
    &lt;div class="list"&gt;
      &lt;div class="box"&gt;box&lt;/div&gt;
      &lt;div class="box"&gt;box&lt;/div&gt;
      &lt;div class="box"&gt;box&lt;/div&gt;
      &lt;div class="box"&gt;box&lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt; </code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://codepen.io/noook/pen/qBNLYRz" rel="nofollow noreferrer">Link to Codepen</a></p>