У меня есть пользовательская полоса прокрутки, которая хорошо смотрится на chrome, но у меня вопрос, возможно ли поставить пользовательскую полосу прокрутки абсолютно позиционированной, как на мобильном устройстве, чтобы она не нарушала стиль меню 
Вот так это выглядит, когда появляется полоса прокрутки, между меню есть пробел, и он выглядит разбитым.
я хочу, чтобы меню с .active li нужно было соединить с правой границей .nav-side-menu, как на рисунке ниже. Активная кнопка должна занимать всю ширину, не должно быть никакого зазора. Это должно выглядеть как Image1
Есть ли способ исправить это только с помощью css?
html,
body{margin:0; padding:0; height:100%}
/*Scrollbar style*/
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
/*Menu Style*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #e0e3e4;
position: fixed;
width: 200px;
height: 100%;
box-shadow: inset -1px 0 0 rgba(0,0,0,0.2);
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
background-color: #4f5b69;
}
.nav-side-menu li {
padding-left: 10px;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
}
.nav-side-menu li a {
text-decoration: none;
color: #000;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
box-shadow: inset 3px -1px 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
background-color: #d3d7d8;
transition: all 0.3s ease;
}
.nav-side-menu li.active {
box-shadow: inset 3px 0 0 red,inset 0 -1px 0 rgba(0,0,0,0.2);
background-color: #f3f6f7;
}
.content-area{
height: 100%;
margin-left: 200px;
background-color: #f3f6f7;
}
<!DOCTYPE html>
<html>
<head></head>
<div class="nav-side-menu">
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse">
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class="active"><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
<li class=""><a class="menu_report" href="#">Test</a></li>
</ul>
</div>
</div>
<div class="content-area"></div>
</html>