JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chatdiv">
    <div id="textdiv"/>
</div>

CSS

#chatdiv {
    width: 200px;
    height: 80px;
    overflow: scroll;
}

JavaScript

chatMessages = [];





function maketext() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

$(document).ready(function () {
    $("#chatdiv").append("TEST");
    setInterval(function addChatMessage() {
        chatMessages.push(maketext());
    }, 100);
    setInterval(function showChatMessageAndScroll() {
        var textdiv = $("#textdiv");
        var chatdiv = $("#chatdiv");
        textdiv.html("");
        $.each(chatMessages, function (i, e) {
            textdiv.append("<span>" + e + "</span><br/>");
        });
        console.log(textdiv.height());
        chatdiv.scrollTop(textdiv.outerHeight());
    }, 150);
});