Cursor Resize on scroll bar of div

The Html div with cursor resize and scroll auto:

<div style="cursor:ew-resize;border-color:red;height:200px; max-height:150px;overflow:scroll;">
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>

The div is displaying the cursor with resize option. But when the scroll bar is visible, the resize cursor is showing inside the scroll bar. How to show the resize cursor outside border of vertical scroll bar.

I have tried using with no luck:

.scrollable { 
  cursor: ew-resize; 
}

Please provide your suggestions. Thanks.