title: Top gets cut off when using Flexbox
body: <p>I am using flexbox to layout <code>div's</code>. When I have a lot of <code>li's</code> inside the <code>div</code>, (with each <code>li</code> having a width of 100%/3) the top gets cut off. So I searched online, and they said to insert <code>margin: auto</code> to the inner <code>div</code>. When I do that, I get a new problem. Let me show you:</p>
  
  <p>With <code>margin: auto</code> <strong>not</strong> applied:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
      height:100%;
      margin: 0;
      padding:0;
  }
  #outerWrapper {
      background-color: aqua;
      height: 100%;
      display: flex;
      justify-content: flex-start; /* This is ignored */
      align-items: center;
      overflow: auto;
      
  }
  
  #innerWrapper {
     /* margin:auto; /* If this line is removed, then it does flex-start, but the top is cut off */
      width: 70%;
      list-style-type: none;
      padding: 0;
      
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      align-content:flex-start;
  }
  
  
  li {
      border: 1px solid black;
      box-sizing: border-box;
      flex-basis:calc(100%/3);
      height:100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outerWrapper"&gt;
      &lt;ul id="innerWrapper"&gt;
          &lt;li class="flex-item"&gt;1&lt;/li&gt;
          &lt;li class="flex-item"&gt;2&lt;/li&gt;
          &lt;li class="flex-item"&gt;3&lt;/li&gt;
          &lt;li class="flex-item"&gt;4&lt;/li&gt;
          &lt;li class="flex-item"&gt;5&lt;/li&gt;
          &lt;li class="flex-item"&gt;6&lt;/li&gt;
          &lt;li class="flex-item"&gt;7&lt;/li&gt;
          &lt;li class="flex-item"&gt;8&lt;/li&gt;
          &lt;li class="flex-item"&gt;9&lt;/li&gt;
          &lt;li class="flex-item"&gt;10&lt;/li&gt;
          &lt;li class="flex-item"&gt;11&lt;/li&gt;
          &lt;li class="flex-item"&gt;12&lt;/li&gt;
          &lt;li class="flex-item"&gt;13&lt;/li&gt;
          &lt;li class="flex-item"&gt;14&lt;/li&gt;
          &lt;li class="flex-item"&gt;15&lt;/li&gt;
          &lt;li class="flex-item"&gt;16&lt;/li&gt;
          &lt;li class="flex-item"&gt;17&lt;/li&gt;
          &lt;li class="flex-item"&gt;18&lt;/li&gt;
          &lt;li class="flex-item"&gt;19&lt;/li&gt;
          &lt;li class="flex-item"&gt;20&lt;/li&gt;
          &lt;li class="flex-item"&gt;21&lt;/li&gt;
          &lt;li class="flex-item"&gt;22&lt;/li&gt;
          &lt;li class="flex-item"&gt;23&lt;/li&gt;
          &lt;li class="flex-item"&gt;24&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  <a href="http://jsfiddle.net/rgs5tmx0/" rel="noreferrer"><h3>JSFiddle</h3></a></p>
  
  <p><strong>Problem:</strong> <code>flex-start</code> works, but the top is cut off.</p>
  
  <hr>
  
  <p>With <code>margin: auto</code> applied:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
      height:100%;
      margin: 0;
      padding:0;
  }
  #outerWrapper {
      background-color: aqua;
      height: 100%;
      display: flex;
      justify-content: flex-start; /* This is ignored */
      align-items: center;
      overflow: auto;
      
  }
  
  #innerWrapper {
     margin:auto; /* If this line is removed, then it does flex-start, but the top is cut off */
      width: 70%;
      list-style-type: none;
      padding: 0;
      
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      align-content:flex-start;
  }
  
  
  li {
      border: 1px solid black;
      box-sizing: border-box;
      flex-basis:calc(100%/3);
      height:100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outerWrapper"&gt;
      &lt;ul id="innerWrapper"&gt;
          &lt;li class="flex-item"&gt;1&lt;/li&gt;
          &lt;li class="flex-item"&gt;2&lt;/li&gt;
          &lt;li class="flex-item"&gt;3&lt;/li&gt;
          &lt;li class="flex-item"&gt;4&lt;/li&gt;
          &lt;li class="flex-item"&gt;5&lt;/li&gt;
          &lt;li class="flex-item"&gt;6&lt;/li&gt;
          &lt;li class="flex-item"&gt;7&lt;/li&gt;
          &lt;li class="flex-item"&gt;8&lt;/li&gt;
          &lt;li class="flex-item"&gt;9&lt;/li&gt;
          &lt;li class="flex-item"&gt;10&lt;/li&gt;
          &lt;li class="flex-item"&gt;11&lt;/li&gt;
          &lt;li class="flex-item"&gt;12&lt;/li&gt;
          &lt;li class="flex-item"&gt;13&lt;/li&gt;
          &lt;li class="flex-item"&gt;14&lt;/li&gt;
          &lt;li class="flex-item"&gt;15&lt;/li&gt;
          &lt;li class="flex-item"&gt;16&lt;/li&gt;
          &lt;li class="flex-item"&gt;17&lt;/li&gt;
          &lt;li class="flex-item"&gt;18&lt;/li&gt;
          &lt;li class="flex-item"&gt;19&lt;/li&gt;
          &lt;li class="flex-item"&gt;20&lt;/li&gt;
          &lt;li class="flex-item"&gt;21&lt;/li&gt;
          &lt;li class="flex-item"&gt;22&lt;/li&gt;
          &lt;li class="flex-item"&gt;23&lt;/li&gt;
          &lt;li class="flex-item"&gt;24&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  <a href="http://jsfiddle.net/e0ctrmut/" rel="noreferrer"><h3>JSFiddle</h3></a></p>
  
  <p><strong>Problem:</strong> <code>flex-start</code> doesn't work, but top is not cut off.</p>
  
  <p>My question is, how can I have <code>justify-content: flex-start</code> and have the top not get cut off?</p>