JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

CSS

#container{
    background-color: gray;
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 400px;
    overflow-x: hidden;
    overflow-y: auto;
}

.content {
    background-color: red;
    width: 390px;
    height: 25px;
    margin: 5px;
}

JavaScript

var $container = $('#container');

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

var updateContainer = function() {
    var hasScroll = $container.hasScrollBar();
    if(hasScroll) {
        console.log("Has scrollbar");
       $container.css({'min-width': '415px'});
    } else {
        console.log("!Has scrollbar");
        $container.css({'min-width': '400px'});
    }
}

/* Update on load */
updateContainer();
/* Update on window resize */
$( window ).resize(function() {  
    updateContainer();  
});