js-grid output height restriction issues - Cannot control overflow of output

I am currently using js-grid to surface data returned from a database query as part of a web application. All features seem to operate as I would like; however, when the data returned leads to the height of the overall grid being greater than that of the parent element it "overflows".

For example, it should look like:

but, with enough data, I'm getting:

I have set the height value in the jsGrid call to that of the container element, as well as trying to set a height and max-height css value using both css and jQuery. I've also added an overflow of scroll and auto, to no effect.

function surfaceDataGrid(message, recipient) {
var fieldData = JSON.parse(message.Data);
activeRequests.splice(0, activeRequests.length);
var columns = getColumns(recipient);
var Columns = columns.list.length;
var recipientElement = '#' + recipient;
var gridHeight = $(recipientElement).height();
var gridWidth = $(recipientElement).width();
$(recipientElement).html('<div id="jsgrid"></div>');
if (fieldData.length !== 0) {
    loggingAction('log', 'NOTIFICATION : Query returned ' + fieldData.length + ' rows of data. ');
    $(recipientElement).children('#jsgrid').jsGrid({
        data: fieldData,
        editing: false,
        fields: eval(columns),
        height: gridHeight,
        inserting: false,
        pageindex: 1,
        pagesize: 1,
        paging: false,
        selecting: "true",
        sorting: true,
        width: gridWidth,
    });
    var Rows = ($('.jsgrid-table tbody tr').length) - 3;
    $('.jsgrid-table').removeAttr('style');
    var gridheight2 = (gridHeight - 28) + "px";
    var headerwidth = (gridWidth / Columns) + 'px';
    $('.jsgrid-header-cell').width(headerwidth).width('28px');
    $('.jsgrid-grid-body').css('margin-top', '28px');
    $('.jsgrid .jsgrid-grid-body').css('height',gridheight2);
    $('.jsgrid-table').width(gridWidth + 'px');
    $('.jsgrid-grid-body .jsgrid-table').width(gridWidth + 'px').height(gridheight2 + 'px');
    $('.jsgrid-row').attr("tabIndex", "1");
    $('.jsgrid-alt-row').attr("tabIndex", "1");
}
else {
    $(recipientElement).children().remove();
    $(recipientElement).append('<div id="jsgrid"><h2 class="errorMessage" style="padding:1em;text-align:center;">No data returned.<br> Please resubmit!</h2></div>');
    $(recipientElement).fadeIn(fadeINtiming);
    loggingAction('log', 'NOTIFICATION : Query returned no data.');
}
$('tr').click(function () {
    var instantVariable0 = $('.jsgrid-header-row').parent().children()[0];
    var selectedType0 = $(instantVariable0).text();
    var instantVariable1 = $(this).parent().children()[0];
    gridValueSelected = $(instantVariable1).text();
    loggingAction('log', 'NOTIFICATION : A cell has been clicked');
    loggingAction('info', 'INFORMATION : Agent has selected ' + selectedType0.split(' ')[1] + ' value of "' + gridValueSelected + '".');
    $(this).addClass('selectedRow').siblings().removeClass('selectedRow');
});

}