title: How to make vertical scrollbar thinner and get rid of the right-bottom empty space?
body: <p>Below there is a <strong>pre</strong> tag that has vertical and horizontal scrollbars. How to make the vertical scrollbar thinner(like the horizontal one) and to get rid of the right-bottom empty space(make it gray color like the background)?</p>
  <p><a href="https://i.stack.imgur.com/g6HzU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/g6HzU.png" alt="enter image description here" /></a></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> :root {
          --code-color: darkred;
          --code-bg-color: #f6f6f6;
          --code-font-size: 14px;
          --code-line-height: 1.4;
          --scroll-bar-color: #c5c5c5;
          --scroll-bar-bg-color: #f6f6f6;
      }
  
      pre {
          color: var(--code-color);
          font-size: var(--code-font-size);
          line-height: var(--code-line-height);
          background-color: var(--code-bg-color);
      }
  
      .code-block {
          max-height: 100px;
          overflow: auto;
          padding: 8px 7px 5px 15px;
          margin: 0px 0px 0px 0px;
          border-radius: 7px;
      }
  
      * {
          scrollbar-width: thin;
          scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
      }
  
      /* Works on Chrome, Edge, and Safari */
      *::-webkit-scrollbar {
          width: 12px;
      }
  
      *::-webkit-scrollbar-track {
          background: var(--scroll-bar-bg-color);
      }
  
      *::-webkit-scrollbar-thumb {
          background-color: var(--scroll-bar-color);
          border-radius: 20px;
          border: 3px solid var(--scroll-bar-bg-color);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:300px; height:100px"&gt;
      &lt;pre class="code-block"&gt;SOME TEXT LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      O
      N
      G
      &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>More probabily it can be fixed using CSS styles.</p>