Right scrollbar causes text to shrink when it is shown - html

Question

I have a problem with the y-scrollbar.
My problem is that when i hover the DIV, a y-scrollbar is shown afterward, which this will makes everything in that DIV shrink a bit. How can i avoid this?
html
<div class="ht ov-h darker-bg p-r-3">
<h1 class="widget-title p-y-2 p-x-1"> Top Artists </h1>
<ul class="list-artists p-l-0">
{{#each artists as |artist|}}
<li>
<a href="#" class="link-nostyle">
<div class="row p-y-1">
<div class="col-xs-4">
<img src="{{artist.image}}" class="img-fluid img-circle">
</div>
<div class="col-off-xs-1 col-xs-7 vertical-text">
<span> {{artist.name}} </span>
</div>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
css
.widget-title {
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
margin-bottom: $spacer-y;
}
.widget {
background: #E0EAEC;
}
.ov {
overflow: auto;
}
.ov-h {
overflow: hidden;
&:hover, &:focus {
overflow: auto;
}
}
.ht {
height: 100%;
}

Answer 1

You have a bit of options here.
1- You can set the scrollbar to be always visible, using overflow-y:scroll
2- You can use jQuery scrollbars, like 'Perfect scrollbar'
3- You can always hide the overflow while hovering, using overflow-y:hidden in your &:hover, &:focus.