How to avoid Flickering div due to show and hide scrollbar on mouse enter

Issue

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

  .parent {
        width:100%;
        max-height: 400px;
        overflow-y: hidden;
      }
     .parent:hover {
        overflow-y: scroll;
     }
     .table {
       width: 100%;
     }

<div class="parent">
   <table class="table">
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
    </table>
</div>

Solution

Firstyl you can add CSS width: to scroll bar. After that, add to .parent{} width (subtract scroll bar width from 100%).You can use CSS calc(); function for this. When you hover parent, add CSS width 100% . But if you want to use the table width absolutely 100%, there is a guy solved via jQuery: https://stackoverflow.com/a/17380697/8660891 *Sorry for my bad English :)

::-webkit-scrollbar {
    width: 15px;
    padding:0px;
}
::-webkit-scrollbar-thumb {
  min-height:50px;
  background-color:#888;
  height: 50px;
}
::-webkit-scrollbar-track {
    background: #e3e3e3;
}
.parent {
        width:calc(100% - 15px);
        max-height: 200px;
        overflow-y: hidden;
      }
     
     .parent:hover {
        overflow-y: scroll;
        width: 100%;
     }
     .table {
       width: 100%;
     }

<div class="parent">
   <table class="table">
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
    </table>
</div>

Answered By - ariferol01