JSFiddle - React, Tailwind, and code Playground

by eddiemonge

HTML

<div id="parent">
<div id="chat"></div>
</div>

CSS

#parent {
    height: 400px;
    width: 400px;
    position: relative;
    border: 2px solid green;
    border-radius: 4px;
    overflow: hidden;
}

#chat { 
    height: 100%;
    width: 100%;
    background: black;
    color: green;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: scroll;
    display: table-cell;
    vertical-align: bottom;
}

.msg {
}

JavaScript

function insertNew(idx) {
    var newMsg = $('<div>', {
            text: "A new message has arrived titled: "+idx,
            'class': "msg"
        }),
        nmh = newMsg.height();
                         
    newMsg
        .appendTo( $('#chat') );
    
    //setTimeout(function() {
    //    insertNew(idx+=1);
    //},500);
}

insertNew(1);
insertNew(10);
insertNew(100);
insertNew(1000);
insertNew(100000);