JSFiddle - React, Tailwind, and code Playground

by Netsurfer

HTML

<div id="outer">
    <div id="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit et risus eu aliquet. Aenean eleifend dictum metus eget dapibus. Integer tempor viverra enim sit amet pharetra. Aenean placerat faucibus libero, vitae bibendum turpis luctus ut. Proin ultrices nisl sed lorem posuere rutrum. Vestibulum eu tellus sit amet erat iaculis dapibus. Integer consequat felis id turpis mollis, ut tempor nisl vestibulum. Fusce ac maximus orci, at commodo felis. Etiam erat orci, condimentum nec nibh sed, tempor semper urna. Praesent urna lorem, volutpat ac elit id, dapibus ornare sapien. Vivamus ut pulvinar elit. Pellentesque lacus nunc, pellentesque vel pulvinar id, pulvinar vel metus. Nulla convallis mi velit, id condimentum diam ultricies a. Phasellus a aliquam magna. Nullam rhoncus nibh justo, id rutrum nunc vestibulum non.</p>
        <p>Nulla nec justo vel nibh vulputate eleifend nec eu orci. Vestibulum sit amet sem pharetra, eleifend metus id, venenatis dui. Nulla euismod interdum ligula, quis condimentum nibh eleifend sed. Phasellus erat massa, aliquet at tellus nec, interdum semper arcu. Cras malesuada ligula a varius pellentesque. Mauris venenatis condimentum hendrerit. Vivamus id lacinia velit. Aenean ac diam ut tortor sagittis rhoncus vitae vel lectus. Aenean ornare finibus luctus. Aliquam nec maximus elit, at molestie mauris. Proin pellentesque porta eros non lobortis. Phasellus efficitur metus eget malesuada consectetur. Nullam non ex nec elit porttitor sollicitudin.</p>
    </div>
</div>
<div id="cons"></div>

CSS

#outer {
    position: relative;
    max-width: 20rem;
    height: 50vh;
    margin-bottom: 3em;
    border: 1px solid;
}
#inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid red;
    overflow-y: auto;
}
#outer.scroll > div {
    -webkit-column-width: 1000rem;
    -moz-column-width: 1000rem;
    column-width: 1000rem;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    overflow: auto;
}
p {
    margin: 0 0 1.5em;
    padding: 0 1em;
}

JavaScript

$(document).ready(function () {
    var scrollParent = $('#outer');
    var scrollElement = $('#inner');
    var baseHeight = scrollParent.prop('clientHeight');
    var scrolledHeight = scrollElement.prop('scrollHeight');
    var baseWidth = scrollElement.width();

    if (scrolledHeight > baseHeight) {
        scrollParent.addClass('scroll');
        var scrolledWidth = scrollElement.prop('scrollWidth');
        //console.log("baseWidth: " + baseWidth);
        //console.log("scrolledWidth: " + scrolledWidth);
        $('#cons').html('<p>Base Width: '+baseWidth+'px</p><p>Scrolled Width: '+scrolledWidth+'px</p>');
    }
});