title: How to get rid of extra container spacing in flexbox?
body: <p>I'm new to flexbox and I can't find anything though on the W3 page that explains how to get rid of the extra container spacing.</p>
  
  <p>For instance, taking one of their examples, I'm not sure how I'd be able to basically get the same thing as a left, center, and right float with this and get rid of all of that grey area showing in the container.</p>
  
  <p>What if I only want to show the children but not the background of the container?</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>.flex-container {
      display: -webkit-flex;
      display: flex;
      width: auto;
      height: auto;
      background-color: lightgrey;
  }
  
  .flex-item {
      background-color: cornflowerblue;
      width: auto;
      height: auto;
      margin: 0px;
      border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;div class="flex-item"&gt;flex item 1&lt;/div&gt;
    &lt;div class="flex-item"&gt;flex item 2&lt;/div&gt;
    &lt;div class="flex-item"&gt;flex item 3&lt;/div&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>