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>

Green border = OS <br>
Red border = Native

<br>
<br>

<!-- Overlay Scrollbar element ↓ -->

<div class="unstable-parent">
  <div class="scrollable-wrap">
    <div class="scrollable-content" contenteditable>
    asd asd asd asd asd asd asd asd asd ad ad asda sda dadasda
    </div>
  </div>
</div>

SCSS

.os-content-glue {
  //width: auto !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;
}
.os-host {
  border-color: green;
}

.scrollable-content {
  outline: none;
}

JavaScript

OverlayScrollbars.defaultOptions({
	sizeAutoCapable: true,
	paddingAbsolute: true,
  scrollbars: {
  	visibility: 'visible',
    autoHide: 'never'
  }
});
var instance;
var sizeDiv = $('<div style="height: 0; overflow: hidden;"></div>');
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(); 
  $(instance.getElements().host).append(sizeDiv);
  sizeDivUpdate();
});
$('.scrollable-content').on('input', function() {
	sizeDivUpdate();
});