JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="wrap">
    <ul>
        <li>Teste</li>
    </ul>
</div>
<button id="add">Add</button>

CSS

#wrap{
    max-height: 100px;
    overflow: auto;
    color: #983b3b;
    border: #d8bdbd 1px solid;
    font: 11px tahoma, verdana, arial, sans-serif;
}
#wrap ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#wrap li{
    background: #f4eded;
    padding: 7px;
    margin: 1px 0;
    text-align: center;
}
button{
    cursor: pointer;
    background: #f4eded;
    width: 100%;
    border: #d8bdbd 1px solid;
    padding: 3px;
    margin: 3px;
    text-align: center;
}
.new{
    display: none;
}

JavaScript

$('#wrap').animate({                   // unsando o jQuery animate para animar o scroll
        scrollTop: $('#wrap ul').height()  // fazer scroll para a posição correspondente à altura do 'ul', o que é o mesmo que dizer scroll até ao fundo
    }, 500);