JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="libtn">
+li
</button>
<button type="button" id="szbtn">
szTog
</button>

<div id="box" class="box sz1">
  <ul id="ul">
  </ul>
</div>
<div class="demo2">
  <ul>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>End of the List</li>
  </ul>
</div>

CSS

html,body{
  height:100%;
}

.box{
  border:2px solid gray;
  overflow-y:auto;
}

.sz1{
  height:15%;
}

.sz2{
  height:35%;
}

.sz3{
  height:80%;
}

.demo2{
  height:75px;
  overflow:visible;
  border:1px solid green;
}
.demo2 ul{
  font-style:italic;
  height:100%;/*magical missing semicolon lol*/
  overflow-y:scroll;
}

JavaScript

function $(a, b) { return (b || document).getElementById(a); }
$.bind = function (ele, o) { for (var event in o) ele.addEventListener(event, o[event]); };
$.init = function (init, args, me) { if (document.readyState !== "loading") { init.apply(me, args); } else { document.addEventListener("DOMContentLoaded", function () { init.apply(me, args); }); } }
$.hasClass = function (ele, cls) { return ele.classList.contains(cls); }


function add(){
}


$.init(function(){
	$.bind($("libtn"),{
  	click:function(){
      var ul = $("ul");
      var li = document.createElement("li");
      li.innerHTML = "yo" + "oooooooooo".substr(Math.floor(10*Math.random()));
      ul.appendChild(li);
    }
  });
  
  $.bind($("szbtn"),{
  	click:function(){
    	var div = $("box");
      if($.hasClass(div,"sz1")){
      	div.className="box sz2";
      }else if($.hasClass(div,"sz2")){
      	div.className="box sz3";
      }else{
      	div.className="box sz1";
      }
    }
  })
})