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: #EEE;
	border-right: 1px solid #8E8E8E;
	
	overflow: auto;
	
}

#iWantToBeHuge{

    width: auto;
	height: 95%;
    
    /*    already tried these    */
    /*    position:absolute;     */
    /*    position:relatve;      */
    /*    float: left;           */
    
}