Top gets cut off when using Flexbox

Question

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:

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

<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

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

---

With margin: auto applied:

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

<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

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?

Answer 1

use

.flex-parent{
  display: flex;
  align-items: center;
  justify-content: center;
}


.flex-child{
  margin-top: auto;
  margin-bottom: auto;
}