I am using flexbox to layout `div's`. When I have a lot of `li's` inside the `div`, (with each `li` having a width of 100%/3) the top gets cut off. So I searched online, and they said to insert `margin: auto` to the inner `div`. When I do that, I get a new problem. Let me show you:

With `margin: auto` **not** applied:

```css
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;
}
```

```html
<div id="outerWrapper">
    <ul id="innerWrapper">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
        <li class="flex-item">7</li>
        <li class="flex-item">8</li>
        <li class="flex-item">9</li>
        <li class="flex-item">10</li>
        <li class="flex-item">11</li>
        <li class="flex-item">12</li>
        <li class="flex-item">13</li>
        <li class="flex-item">14</li>
        <li class="flex-item">15</li>
        <li class="flex-item">16</li>
        <li class="flex-item">17</li>
        <li class="flex-item">18</li>
        <li class="flex-item">19</li>
        <li class="flex-item">20</li>
        <li class="flex-item">21</li>
        <li class="flex-item">22</li>
        <li class="flex-item">23</li>
        <li class="flex-item">24</li>
    </ul>
</div>
```

[### JSFiddle](http://jsfiddle.net/rgs5tmx0/)

**Problem:** `flex-start` works, but the top is cut off.

---

With `margin: auto` applied:

```css
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;
}
```

```html
<div id="outerWrapper">
    <ul id="innerWrapper">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
        <li class="flex-item">7</li>
        <li class="flex-item">8</li>
        <li class="flex-item">9</li>
        <li class="flex-item">10</li>
        <li class="flex-item">11</li>
        <li class="flex-item">12</li>
        <li class="flex-item">13</li>
        <li class="flex-item">14</li>
        <li class="flex-item">15</li>
        <li class="flex-item">16</li>
        <li class="flex-item">17</li>
        <li class="flex-item">18</li>
        <li class="flex-item">19</li>
        <li class="flex-item">20</li>
        <li class="flex-item">21</li>
        <li class="flex-item">22</li>
        <li class="flex-item">23</li>
        <li class="flex-item">24</li>
    </ul>
</div>
```

[### JSFiddle](http://jsfiddle.net/e0ctrmut/)

**Problem:** `flex-start` doesn't work, but top is not cut off.

My question is, how can I have `justify-content: flex-start` and have the top not get cut off?