JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
    <div id="wrapper">
        <div id="navigation"></div>
        <div id="container">
            <div id="button"></div>
        </div>
    </div>
</div>

CSS

HTML,BODY { width:100%; height:100%; }
* { margin: 0; padding: 0; }
#slider
{
	position: fixed;

	top: 0;
	bottom: 0px;
	left: 100px;

	overflow-y: auto;

	background-color: red;
}

#wrapper
{
	position: relative;

	height: 100%;

	background-color: #000000;

	min-height:400px;
}

#navigation
{
	display: inline-block;
	width: 80px;
	height: 100%;

	background-color: #0000FF;
}

#container
{
	display: inline-block;
	height: 100%;

	background-color: #00FF00;
}

#button
{
	width: 22px; height: 100%;
	float:right;

	background-color: #CCFFCC;
	cursor:pointer;
}

JavaScript

$(window).bind("load resize", function(){  
     //this runs as soon as the page is 'ready'
    if($(window).height() < 400){        
        $("#slider").css("overflow-y","scroll");
    }else{        
        $("#slider").css("overflow-y","hidden");   
    }  
});