Is there any way to make scrollbar's fit within the parent container?

Question

I am trying to make the scroll bar visible only within the parent container, like if the parent container has alot of border radius, make the scrollbar visible only within that border radius.

Answer 1

You can try something like this

<div class="outmost-container">
    <div class="container">
        <div class="content">
            <!-- Temp -->
        </div>
    </div>
</div>

CSS

.outmost-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.container {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.content {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

Result from code above