title: How to avoid Flickering div due to show and hide scrollbar on mouse enter
body: <p>I am showing a scroll bar on mouse hover and it makes a flicker effect in UI. Can anyone suggest how to avoid it? The code is here</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .parent {
          width:100%;
          max-height: 400px;
          overflow-y: hidden;
        }
       .parent:hover {
          overflow-y: scroll;
       }
       .table {
         width: 100%;
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
     &lt;table class="table"&gt;
        &lt;tr&gt;&lt;td&gt;Key&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Key&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Key&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>