JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrap">
<button></button> <div class="mes">
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
<p>sdsdsd</p>
...
CSS
.wrap{
border: 1px solid black;
overflow-y: scroll;
height: 200px;
}
JavaScript
$(function(){
$('button').click(function(){
$('.mess').append('<p>sdsdsd'+(new Date()).now()+'</p>');
var h = $('.mes').height();
$('.wrap').scrollTop(h + $('.wrap').height());
});
})