JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<div class="container_item" id="chat">


<div class="item"><p>Bottom</p></div>
<div class="item"><p>1</p></div>
<div class="item"><p>1</p></div>
<div class="item"><p>1</p></div>
<div class="item"><p>1</p></div>
<div class="item"><p>1</p></div>
<div class="item"><p>1</p></div>
<div class="item"><p>1</p></div>
<div class="item"><p>1</p></div>
<div class="item"><p>Top</p></div>


</div>

<div class="container_item">
<div class="item_foot"><a href="#" onclick="add();">click me</a></div>
</div>

</div>

CSS

html, body {margin:0;height:100%;}

.container {height:100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    }
.container_item:nth-child(1) {
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    align-self: auto; 
        
        height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
    }
.item_foot {box-sizing: border-box;padding:20px;display:block;height:150px;background-color:#dedede;}

JavaScript

function add() {
var chat = document.getElementById('chat');
const newDiv = document.createElement('div');
newDiv.innerHTML = "<div class='item'>New Text</div>";
chat.insertBefore(newDiv, chat.firstChild);
chat.scrollTop = chat.scrollHeight;
}