JSFiddle - React, Tailwind, and code Playground

by Kukkimonsuta

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;
}
.item {
    padding: 5px; 
    border: solid 2px orange; 
}

JavaScript

function updateAutoScroll(element) {
    var $element = $(element);

    if (element.scrollHeight > element.clientHeight) 
        $element .css("overflow-y", "scroll");
    else 
        $element .css("overflow-y", "auto");
}

$(".container").each(function() { updateAutoScroll(this); });