Table goes max height when screen is resized

Question

I have a table that is generated with a min-height of 300px and a max-height of 650px which is perfect. The only problem is when I resize the window the table will stretch all the way down until all its values are shown. It's supposed to have a scroll bar so you can move through the list but instead once the screen is resized the scroll bar is gone and it just shows all the values in the table on one page.

CSS:

#tblPropertyGrid
{
    width: 250px; 
    min-height: 300px; 
    max-height: 650px; 
    font-size: 10px;
    overflow: scroll;
    margin-left:15px; 
}

HTML:

<div class='row'>
    <div class='thirdDiv' id="tabProperties">
        <script type="text/javascript">
                $(document).ready(function() {
                    $('#tblPropertyGrid').handsontable({
                        colHeaders: ["Name", "Value"],
                        colWidths: [115, 115],
                        maxCols: 2,
                        startCols: 2,
                        multiSelect: false,
                        afterSelectionEnd: function(row1, col1, row2, col2) {
                            $('.handsontableInputHolder').css('left', '114px');
                            $('.handsontableInputHolder').css('top', $('.htCore:first').children('tBody:first').children('tr')[row1].offsetTop + 'px');
                        },
                        afterChange: function(changes, source) {
                            if (changes != null && source == 'edit' && gridFilled)
                            {
                                var row = changes[0][0];
                                var col = changes[0][1];
                                var table = $('#tblPropertyGrid').handsontable('getInstance');
                                var currentItem = $(table.getCell(row, col));
                                var originalHTML = currentItem.html();
                                currentItem.html("EDITING...");

                                $.ajax({
                                    url: '@Url.Action("EditProperty", "Home")',
                                    type: "POST",
                                    data: { ID: Object.keys(selectedSections)[$(selectedSections).size() - 1], PropertyName: table.getCell(row, 0).innerHTML, NewValue: changes[0][3] } ,
                                    async: true
                                }).done(function(result) {
                                    if (result == "True")
                                    {
                                        currentItem.html(originalHTML);
                                        currentItem.css('background', 'lightgreen');
                                        currentItem.animate({backgroundColor:"white"}, 1500);
                                    }
                                    else
                                    {
                                        currentItem.html(originalHTML);
                                        currentItem.css('background', '#FF5959');
                                        //currentItem.animate({backgroundColor:"white"}, 1500);
                                    }
                                });
                            }
                        }
                    });

                    var table = $('#tblPropertyGrid').handsontable('getInstance');

                    while (table.countRows() > 1)
                    {
                        table.alter('remove_row', 1);
                    }

                    table.getCellMeta(0, 0).readOnly = true;
                    table.getCellMeta(0, 1).readOnly = true;

                    //Should show btnAdd?
                    if (GetURLParameter('id') != null)
                        $('#btnAdd').prop('disabled', false);
                    else
                        $('#btnAdd').prop('disabled', true);
                });
        </script>
        <h2 style="font-size: 14px;margin-top:20px" href="#tabProperties">Properties</h2>
        <div id="tblPropertyGrid"></div>
    </div>

Answer 1

Tables have a built in property of "stretch to fit".

Try putting the table in a div with the same max/min height and overflow properties.

Answer 2

Kindly use table tag to populate the table and set properties for that. After this put table inside a div tag and use above css for that div tag. not for table tag