JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" onclick="showDialog()">Open</a>

<div id="myDialog" style="display:none;">
    <p>Hello world</p>
    <div id="resizeToParent" style="overflow:scroll">
        <div style="background: #ffc;"></div>
    </div>
</div>

CSS

div[role="dialog"] {
    box-sizing:border-box;
}

JavaScript

showDialog = function () {

    var w = $(window).width();
    var h = $(window).height();

    $('#myDialog').dialog({
        title: 'resize me',
        height: h,
        width: w
    });

    $('#myDialog').bind("dialogresize", function (event, ui) {
        $('#myDialog #resizeToParent').css('height', ($('#myDialog').height() - 40) + 'px');

        $('#myDialog #resizeToParent div').text('inner: ' + $('#myDialog #resizeToParent').css('height') + ' outer: ' + $('#myDialog').css('height'));
    });
}