JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.6.1/js/jquery.overlayScrollbars.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.6.1/css/OverlayScrollbars.min.css">

<button class="overlay-scrollbars">Attach OverlayScrollbars</button>
<button class="destroy">Destroy</button>

<br>
<br>

<!-- Overlay Scrollbar element ↓ -->

<div class="unstable-parent">
  <div class="scrollable-wrap">
    <div class="scrollable-content" contenteditable>
    Phasellus porta metus sapien, nec Cras eu viverra velit. Suspendisse. <br>.<br>.<br>.<br>.<br>.<br>.<br>.
    </div>
  </div>
</div>

CSS

.os-content-glue {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  visibility: hidden !important;
}

.unstable-parent {
  resize: both;
  overflow: auto;
  padding: 20px;
  background: #e1e1e1;
  float: left;
}

.scrollable-wrap {
  display: inline-block;
  border: 1px solid red;
  max-height: 100px;
  max-width: 400px;
  overflow: auto;
  padding: 10px;
}

.scrollable-content {
  outline: none;
}

JavaScript

OverlayScrollbars.defaultOptions({
	sizeAutoCapable: true,
	paddingAbsolute: true,
  scrollbars: {
  	visibility: 'visible',
    autoHide: 'never'
  }
});
var instance;
var sizeDiv;
var sizeDivUpdate = function() {
	sizeDiv.html($('.scrollable-content').html());
}
/* - - - Demo code - - -*/
$('.destroy').on("click", function() {
	OverlayScrollbars( $('.scrollable-wrap'), {}).destroy();
});
$('.overlay-scrollbars').on("click", function() {
	instance = $('.scrollable-wrap').overlayScrollbars({}).overlayScrollbars(); 
  sizeDiv = $(instance.getElements().host).find('.os-content-glue').first();
  sizeDivUpdate();
});
$('.scrollable-content').on('input', function() {
	sizeDivUpdate();
});