<div class='wrapper'>
  <div class='content'>
    <div class='option'>
      <p>            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta suscipit dignissimos, illo architecto reprehenderit corrupti, autem, dolore modi iure quidem necessitatibus quaerat nam assumenda laudantium numquam. Modi ad repellat at tempore earum ducimus, molestiae corporis non, suscipit facilis omnis esse eos maiores sequi qui nostrum consequatur repudiandae veniam asperiores, autem laboriosam nam! Quam cupiditate repellendus ut, eligendi inventore aliquam veniam quod debitis quae ea a veritatis. Maxime ullam autem itaque animi sit atque obcaecati consectetur? Explicabo, nemo nostrum? Consequuntur, minima. Reprehenderit aut, at ab sapiente quisquam magnam voluptate fugiat veniam hic rem voluptatibus cum corporis quam animi totam fugit nisi.</p>
    </div>
  </div>
</div>

* {padding: 0; margin: 0;border: 0;}

body {
  background: #333;
}
p {
  font-size: 30px;
  color: #fff;
}
.wrapper {
  --padding: 50px;
  --scrollbar: 10px;
  float: right;
  width: 500px;
  height: 400px;
  background: green;
  position: relative;
}
.wrapper::after {
  content: '';
  border: var(--padding) solid green;
  border-right: none;
  position: absolute;
  left: 0;
  top: 0;
  right: var(--scrollbar);
  bottom: 0;
  pointer-events: none;
}
.content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: blue;
  overflow: auto;
  overflow-x: hidden;
  padding: var(--padding);
  padding-right: 0;
}
.content::-webkit-scrollbar {
  width: var(--scrollbar);
  background-color: #c4c4c4;
}
.content::-webkit-scrollbar-thumb {
  width: var(--scrollbar);
  background-color: #57a6ff;
}