JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hidescroll">
    <div class="demo">
        This inner div is the one with the scrollbar.
        <br/>
        <br/>
        <br/>
        Wrap it in the hidescroll div to have the scrollbar disappear!
    </div>
</div>

<div class="demo">
    This inner div is the one with the scrollbar.
    <br/>
    <br/>
    <br/>
    Wrap it in the hidescroll div to have the scrollbar disappear!
</div>

The two divs are the same, you can still mouse-wheel scroll both, only you
can't see the scroll bar in the wrapped one

CSS

.demo {
    height:80px;
    overflow:auto;
    width:208px;
    border : 1px solid gray;
}

.hidescroll {
    overflow:hidden;
    width:180px;/*28px less than the inner div. the size of the largest scrollbar*/
}
.hidescroll > * {
    padding-right:8px;/*some browsers have scrollbars of 20px, so pad for them*/
}