JSFiddle - React, Tailwind, and code Playground

by skeurentjes

HTML

<button id="addText">add text</button>

<div id="wrapper">
    <div id="first"></div>
    <div id="second"><h1></h1></div>
</div>

CSS

#wrapper
{
    width:300px;
    height:300px;
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-direction: column;
}

#first
{
    width:300px;
    height: 200px;
    flex-grow: 0;
    flex-shrink: 0;
    background-color:#F5DEB3;

}

#second
{
    width:300px;
    overflow: auto;
    background-color: #9ACD32;
    flex: 1; /* NEW, */
}

JavaScript

document.getElementById("addText").addEventListener("click", myclick);
     function myclick(){
    document.getElementById("second").innerHTML = "test test test test test test test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test testtesttest test test test testtest test test test test"
    }