JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="hidden-scroll">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </div>
</div>

CSS

.wrapper {
    height:400px;
    width:300px;
    overflow:hidden;
}

.wrapper:hover .hidden-scroll {
    width:300px;
}

.wrapper:hover .hidden-scroll div {
    padding-right:0;
}

.hidden-scroll {
  background: black;
  overflow-y: auto;
  overflow-x: hidden;
  height: 400px;
  width: 330px;
}

.hidden-scroll div {
  background: red;
  height: 50px;
  width: auto;
  padding-right:30px;
}