title: Elementor Tabs + custom CSS = too long custom scroll bars than content
body: <p>I added custom CSS code <code>overflow-y=scroll</code> into the tab group of Elementor Tab widget. My target is to make the tabs height only to 300px, and the tabs are scrollable.</p>
  <p><a href="https://i.stack.imgur.com/GqB18.png" rel="nofollow noreferrer">The Tab</a></p>
  <p>Problem is the scrolling area becomes too long than the tabs available, showing unnecessary spaces below the last tab.</p>
  <p><a href="https://i.stack.imgur.com/jupIN.png" rel="nofollow noreferrer">Image of the issue</a></p>
  <p>I found some post like <a href="https://stackoverflow.com/questions/13104249/html-too-long-scroll-bars">this</a> and <a href="https://stackoverflow.com/questions/16589798/css-repeating-background-scroll-bar-too-long">this</a> suggesting some solutions through HTML, but I'm using Elementor. I'm a newbie and not sure where to find the HTML file. Tried looking in the server (I'm using Cpanel) but no idea where to find it.</p>
  <p>I've added these into the Elementor Custom CSS section:</p>
  <pre><code>.elementor-widget-tabs.elementor-tabs-view-vertical .elementor-tabs-wrapper {
  overflow-y: scroll;
  direction: rtl;
  height: 300px;
  
  ::-webkit-scrollbar {
    width: 10px;
  }
  
  ::-webkit-scrollbar-track {
    background: #cccccc;
  }
   
  ::-webkit-scrollbar-thumb {
    background: #8c8c8c;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #36393E; 
  }
  </code></pre>
  <p>How can I solve this? Thank you for the replies</p>