JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="inner">
    </div>
</div>

<button id="button">append</button>

CSS

#container {
    display: block;
    height: 400px;
    width: 500px;
    background: green;
}

#inner {
    display: block;
    max-height: 90%;
    width: 100%;
    background: red;
    overflow-y: scroll;
}

#button {
    position: absolute;
    top: 25px;
    right: 100px;
    width: 150px;
    height: 50px;
}

JavaScript

var i      = 0;
var inner  = document.getElementById('inner');
var button = document.getElementById('button');

button.addEventListener('click', function() {
    var p = document.createElement('p');
    p.innerText = 'line: ' + ++i;
    inner.appendChild(p);
});