JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>

CSS

#menu{
    background:grey;
    float:left;
    height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

JavaScript

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

var neededPadding = "0 "+getScrollbarWidth()+"px 0 0";

$('#add').button().click(function(){
    var d = $('<div/>');
    var b = $('<button type="button">Test</button>');
    d.appendTo($('#menu'));
    b.button().appendTo(d);
  
    if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
        $('#menu').css( "padding", neededPadding );
    }
});