JSFiddle - React, Tailwind, and code Playground

by Ron Valstar

HTML

<div class="scrollbarThickness"></div>
<main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ipsa sint tempora sed, voluptates perspiciatis, in qui assumenda, adipisci ad expedita ullam. Provident, esse eos, nemo et officiis ducimus quae! Dolorem, aliquam. Id ducimus accusamus ratione at eaque sint quibusdam impedit quidem magnam eos velit rem reiciendis dignissimos quia maiores perferendis, sit. Assumenda quo odio, animi quisquam dolor, repudiandae itaque possimus amet fugiat, sunt expedita dolorem reiciendis illo quam error temporibus! Distinctio eius, commodi!</main>

CSS

:root {
  --scrollbar-thickness: 8px;
  --main-width: 12rem;
  --padding: 2rem;
}
.scrollbarThickness {
  width: var(--scrollbar-thickness);
  height: var(--scrollbar-thickness);
  background: red;
  margin-left: calc(var(--main-width) - var(--scrollbar-thickness) + 2*var(--padding));
}
main {
  width: var(--main-width);
  height: var(--main-width);
  overflow: auto;
  padding: var(--padding);
  box-shadow: 0 0 0 var(--padding) lime inset, calc(-1*var(--scrollbar-thickness) - var(--padding))  0 0 lime inset;
}

JavaScript

const {body, documentElement: {style}} = document
const size = 64
const div = document.createElement('div')
Object.assign(div.style, {
  width: size+'px'
  , height: size+'px'
  , overflow: 'auto'
})
div.textContent = 'a '.repeat(1E2)
body.appendChild(div)
const scrollBarThickness = size - div.scrollWidth
style.setProperty('--scrollbar-thickness', scrollBarThickness+'px')
body.removeChild(div)