CSS прокрутка штрихового меню conundrum

Question

У меня есть контейнер с CSS-свойством overflow: auto. Я знаю, как придать стилям полосу прокрутки, но я не понимаю, как я могу:

1) перемещение полосы прокрутки с правой границы контейнера не менее 5 пикселей влево.

2) часть прокрутки - большая часть должна быть, чем часть прокрутки.

Пример кода в "SCSS":

#msg-console { 
    height: 48rem; 
    width: 100%; 
    background: #04aaf8; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 

    &::-webkit-scrollbar { 
     width: 1rem; 
    } 

    &::-webkit-scrollbar-track { 
     border-radius: 1rem; 
     background: rgba(74, 49, 106, 0.9); 
     width: 0.5rem; 
    } 

    &::-webkit-scrollbar-thumb { 
     border-radius: 1rem; 
     background: #fff; 
     width: 0.3rem; 
    } 
} 

Может кто-то пожалуйста, помогите мне? Я ищу только решения для CSS.

Answer 1

Для меня я нашел простое и эффективное решение. Я просто добавил дополнительный внутренний div. стили:

#msg-console { 
    height: 48rem; 
    width: 100%; 
    background: #04aaf8; 
    display: flex; 
    flex-direction: column; 

    .msg-container{ 
       height: 48rem; 
       overflow-y: auto; 
       display: flex; 
       flex-direction: column; 
       width: 99%; 
       box-sizing: border-box; 
       padding: 0 0.5rem; 

       &::-webkit-scrollbar { 
        width: 1rem; 
       } 

       &::-webkit-scrollbar-track { 
        border-radius: 1rem; 
        background: rgba(74, 49, 106, 0.9); 
        width: 0.5rem; 
       } 

       &::-webkit-scrollbar-thumb { 
        border-radius: 1rem; 
        background: #fff; 
        width: 0.3rem; 
       } 
    } 
} 

HTML:

<div id="msg-console> 
    <div class="msg-container"><div> 
</div>