JSFiddle - React, Tailwind, and code Playground

by Zsolt Simon

HTML

<div id="container1"><div id="container2">
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    good<br/>bye.
</div><div>

CSS

*{margin:0;}
#container1{
    height: 100%;
    width: 100%;
    border: 1px solid green;
  /*  overflow: hidden;*/
}

#container2{
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 0px; /* exact value is given in JavaScript code */
}

html, body{
    height: 99%;
    border: 1px solid red;
  /*  overflow:hidden;*/
}

JavaScript

var parent = document.getElementById('container1');
var child = document.getElementById('container2');
child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";