unset -webkit-scrollbar when in :hover
<p>I'm using css that hides the scrollbars until I hover over it (Working on Firefox and IE)</p>

<p>Before the hover it lookes like this:</p>

<p><a href="https://i.stack.imgur.com/yfvkN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yfvkN.jpg" alt="enter image description here"></a></p>

<pre><code>div#popular-service-container &gt; div:first-child &gt; div::-webkit-scrollbar { 
    /* Safari &amp; Chrome */
    display: none;  
}


div#popular-service-container &gt; div:first-child &gt; div{
    overflow-y: auto; 
    overflow-x: hidden;

    /* IE */
    -ms-overflow-style: none; 
    /* Firefox */
    overflow: -moz-scrollbars-none; 

    height: calc(100% - 160px); 
    margin-top: 20px; 
    padding-bottom: 20px; 
    font-family: KarlaRegular,arial,sans-serif; 
    font-size: .9em; 
    text-align: left; 

    color: #4d4e50; 

}

div#popular-service-container &gt; div:first-child &gt; div:hover{
    -ms-overflow-style: scrollbar; 
    /* Firefox */
    overflow: scroll; 
}
</code></pre>

<p>and in IE/Firefox when I mouse over it shows the scrollbars like so:</p>

<p><a href="https://i.stack.imgur.com/J7mxv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J7mxv.jpg" alt="enter image description here"></a></p>

<p>But with the code for Chrome hover (The code below shows the options I have tried seperately):</p>

<pre><code>div#popular-service-container &gt; div:first-child &gt; div:hover::-webkit-scrollbar { 
    /* Safari &amp; Chrome */
    display: initial;   
    display: unset;
}
</code></pre>

<p>it leaves an empty scrollbar like the example:</p>

<p><a href="https://i.stack.imgur.com/TLxTb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TLxTb.jpg" alt="enter image description here"></a></p>

<p>Any ideas on what is missing?</p>