Verhindern, dass Inhalte verschmälern, wenn die Bildlaufleiste angezeigt wird

Question

Ich zeige eine Bildlaufleiste, wenn der Benutzer ein DIV schwebt. Mein Problem ist, wenn die Bildlaufleiste erscheint, wird der Inhalt schmaler.

Werfen Sie einen Blick auf das YouTube-Menü (Desktop-Website), um zu sehen, wonach ich suche.

Dies ist ein Beispielcode und die link to codepen, um es funktioniert zu sehen.

.scrollable{ 
    width: 400px; 
    height: 400px; 
    margin: 12px auto; 
    border: solid 1px black; 
    overflow: hidden; 
    &:hover{ 
     overflow-y: auto; 
    } 
} 

.content{ 
    margin: 0 auto; 
    width: 300px; 
    height: auto; 
} 

Answer 1

hier:

.scrollable{ 
    width: 400px; 
    height: 400px; 
    margin: 12px auto; 
    border: solid 1px black; 
    overflow: hidden; 
    &:hover{ 
     overflow-y: scroll; 
    } 

}

Sie müssen nur die overflow-y: scroll auf schweben so eingestellt, dass es nicht Ihre Inhalte nicht bewegt.