JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainContainer">
    <div id="iWantToBeHuge">
        <ul>
            <li>Stuff
                <ul>
                    <li>More Stuff
                        <ul>
                            <li>Even More Stuff</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <!-- ignore this, this is just for reference -->
        <div style="color:#66E;font-family: helvetica; margin:100px auto;">
             I want this to scroll!!
        </div>
    </div>
</div>

CSS

#mainContainer {
    width: 200px;
    height: 500px;
    float: left;
    background-color: red;
    border-right: 1px solid #8E8E8E;
    overflow-x: scroll;
}
#iWantToBeHuge {
    width: auto;
    height: 95%;
    white-space:nowrap;
    /*    already tried these    */
    /*    position:absolute;     */
    /*    position:relatve;      */
    /*    float: left;           */
}