JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
<aside class="container" >
    <button onclick="openDrawer()">
    open drawer > 
    </button>
    <div class="drawer">
        <div class="drawer-heading">
            <span>I am a drawer</span>
        </div>
        <div class="drawer-content" style="display: none;">
            <div>
                <a>some category</a>
                <br/>
                <a>some category</a>
                <br/>
                <a>some category</a>
                <br/>
                <a>some category</a>
            </div>
        </div>
    </div>
</aside>
</div>

CSS

.container {
  height: calc(100% - 105px);
  width: inherit;
  border: 1px solid red;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.drawer {
    border: 1px solid blue;
    background-color: white;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: all 300ms cubic-bezier(.25,.46,.45,.94);
    position: absolute;
}

.drawer-content {
    border: 1px solid green;
    padding: 15px 15px 15px 15px;
    overflow-y: scroll; //this is actually auto in the code not scroll but struggling to trigger it, maybe jsfiddle
    z-index: 1;
    height:  calc(100% - 43px;);
}

.open-drawer {
  transform: translateX(0);
}

.page {
  height: 300px;
  display: block;
  width: 400px;
}

.drawer-heading {
  text-align: center;
}

JavaScript

function openDrawer(){
	document.getElementsByClassName("drawer")[0].className += " open-drawer";
	document.getElementsByClassName("drawer-content")[0].style.display = "block";
  return;
}



//the scrollbars currently only showing in this fiddle on windows for some reason...