jQuery - Auto Scroll to bottom of a Chat Box

HTML

<div>
    <p>alskdjg;j ;jhe ;he fkh</p>
    <p>alskdjg;j ;jhe ;he fkh</p>
    <p>alskdjg;j ;jhe ;he fkh</p>
    <p>alskdjg;j ;jhe ;he fkh</p>
    <p>alskdjg;j ;jhe ;he fkh</p>
    <p>last one</p>
</div>

CSS

div {
    height: 100px;
    background: aqua;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: 50px;
    /* Remove the below properties */
    /* justify-content: flex-end; */
}

p {
  margin: 0;
  line-height: 50px;
}

JavaScript

var height = 0;
$('div p').each(function(i, value){
    height += parseInt($(this).height());
});

height += '';

console.log('height:', height);
// this gives 300 (as p = 50px & 50*6=300)

$('div').animate({scrollTop: height});