JSFiddle - React, Tailwind, and code Playground

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>

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