JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outerDiv">
    <div class="innerDiv">
        On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.<br/>
You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks.<br/>
When you create pictures, charts, or diagrams, they also coordinate with your current document look.<br/>
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab.<br/>
         On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.<br/>
         On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.<br/>
You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks.<br/>
When you create pictures, charts, or diagrams, they also coordinate with your current document look.<br/>
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab.<br/>
         On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.<br/>
You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks.<br/>
When you create pictures, charts, or diagrams, they also coordinate with your current document look.<br/>
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab.<br/>
         On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.<br/>
You can use these galleries to insert tables, headers, footers, lists, cover pages,...

CSS

.outerDiv {
    width: 50%;
    overflow: hidden;
    height:auto;
    outline: 1px solid blue;
    position:relative;
    bottom:10%;
    top:10%;
        
}

.innerDiv {
    clear:both;
    height:100%;
    overflow: auto;
}

JavaScript

function getScrollBarSize () {  
   var inner = document.createElement('p');  
   inner.style.width = "100%";  
   inner.style.height = "100%";  

   var outer = document.createElement('div');  
   outer.style.position = "absolute";  
   outer.style.top = "0px";  
   outer.style.left = "0px";  
   outer.style.visibility = "hidden";  
   outer.style.width = "100px";  
   outer.style.height = "100px";  
   outer.style.overflow = "hidden";  
   outer.appendChild (inner);  

   document.body.appendChild (outer);  

   var w1 = inner.offsetWidth;  
   var h1 = inner.offsetHeight;
   outer.style.overflow = 'scroll';  
   var w2 = inner.offsetWidth;  
   var h2 = inner.offsetHeight;
   if (w1 == w2) w2 = outer.clientWidth;
   if (h1 == h2) h2 = outer.clientHeight;   

   document.body.removeChild (outer);  

   return [(w1 - w2),(h1 - h2)];  
};

$(document).ready(function() {
  $(".innerDiv").width($(".outerDiv").width() + getScrollBarSize()[0]);
                        });