JSFiddle - React, Tailwind, and code Playground

by iambriansreed

HTML

<div class="container one">
    <div class="item">Some&nbsp;item&nbsp;1</div>
    <div class="item">Some&nbsp;item&nbsp;2</div>
    <div class="item">Some&nbsp;item&nbsp;3</div>
    <div class="item">Some&nbsp;item&nbsp;4</div>
    <div class="item">Some&nbsp;item&nbsp;5</div>
</div>

<div class="container two">
    <div class="item">Some&nbsp;item&nbsp;1</div>
    <div class="item">Some&nbsp;item&nbsp;2</div>
    <div class="item">Some&nbsp;item&nbsp;3</div>
    <div class="item">Some&nbsp;item&nbsp;4</div>
    <div class="item">Some&nbsp;item&nbsp;5</div>
    <div class="item">Some&nbsp;item&nbsp;6</div>
    <div class="item">Some&nbsp;item&nbsp;7</div>
    <div class="item">Some&nbsp;item&nbsp;8</div>
    <div class="item">Some&nbsp;item&nbsp;9</div>
</div>

CSS

.container { 
    position: absolute; 
    left: 25px;
    border: solid 2px green; 
    max-height: 200px; 
    overflow-x: hidden;
    overflow-y: auto;
}
.container.one {
    top: 25px; 
}
.container.two {
    top: 250px;
    overflow:auto; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
}
.item {
    padding: 5px; 
    border: solid 2px orange;
    width: 100%;
}

JavaScript

$(function(){
    
    $('.container').each(function(){                
        if(this.scrollHeight>this.clientHeight)
            $(this).children().wrapAll(
                 '<div style="padding-right:'+scrollbarWidth()+'px;"/>'
            );
    });
           
    function scrollbarWidth() {
        var parent, child, width;    
        if(width===undefined) {
            parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
            child = parent.children();
            width = child.innerWidth() - 
                child.height(99).innerWidth();
            parent.remove();
        }    
        return width;
    };
    
});