JSFiddle - React, Tailwind, and code Playground

by Laurens Maneschijn

HTML

scroll without scrollbar:
<div id="container1">
  <div id="container2">
    <div class="circle"></div>
    a a a a a a a a<br>
    .a a a a a a a a<br>
    ..a a a a a a a a<br>
    ...a a a a a a a a<br>
    hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />hello
    <br />I
    <br />am
    <br />here
    <br />good
    <br />bye.
  </div>
</div>

<hr>

refs:
<a...

CSS

#container1 {
  position: relative;
  height: 100px;
  width: 100px;
  border: 1px solid green;
  overflow: hidden;
  resize: both;
}

#container2 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: -17px;
  border: 1px solid blue;
  overflow: auto;
}

/* full width circle to show where the width ends */
.circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  background: #0000ff40;
}