Javascript 带显示的SlickGrid网格大小：表格

我有一个静态大小的盒子。在这个框中，我有一个slickgrid实例和一些临时内容显示在底部。我希望网格的垂直大小能够很好地流动，以便所有临时内容都显示在底部，而不必调整父框的大小

我已经使用display:table完成了这个任务；并显示：表格行；在沙发上

：在添加网格之前切换内容，以查看我希望它做什么。单击“添加网格”以初始化网格并引发问题

当容器使用display:table；时，SlickGrid似乎无法正确调整自身大小；。调用grid.resizeCanvas时，它在水平方向上变得太大，并且似乎在增大大小

如果从table和tallRow中删除表格显示，则栅格本身的大小将正确。但是，切换内容不会正确地垂直收缩网格。在调用grid.resizeCanvas之前，我可以在JS中手动调整容器的大小，但是表/表行解决方案非常优雅，我希望保留它

有什么想法吗

HTML

Javascript

function toggle() {
    var el = document.getElementById('tempRow');
    el.style.display = el.style.display == 'table-row' ? 'none' : 'table-row';
    grid.resizeCanvas();
}

var grid;
var columns = [
    {id: "title", name: "Title", field: "title"}
];

var options = {
    fullWidthRows: true,
    forceFitColumns: true,
    enableColumnReorder: false
};

function addGrid() {
    var data = [];
    for (var i = 0; i < 500; i++) {
        data[i] = {
            title: "Task " + i
        };
    }

    grid = new Slick.Grid("#grid", data, columns, options);
    document.getElementById('add').style.display = 'none';
}

您必须使用：表格布局：固定；到或显示：表格；元素，使其在指定宽度时不再收缩/扩展

---

并没有办法固定高度，table元素将尽可能地扩展以容纳内容。但这确实使它更接近。我一直在尝试手动调整tempRow的高度，这相当混乱，特别是因为tempRow实际上在我的应用程序中包含一个angle指令。

html {
    background: #444;
    color: #fff;
}

#box {
    background: #666;
    width: 350px;
    height: 500px;
    padding: 5px;
}

#table {
    width: 100%;
    height: 100%;
    display: table;
}

#tallRow {
    height: 100%;
    display: table-row;
}

#grid {
    width: 100%;
    height: 100%;
    background: #777;
    border: 1px solid black;
    box-sizing: border-box;
}

#tempRow {
    display: none;
}

function toggle() {
    var el = document.getElementById('tempRow');
    el.style.display = el.style.display == 'table-row' ? 'none' : 'table-row';
    grid.resizeCanvas();
}

var grid;
var columns = [
    {id: "title", name: "Title", field: "title"}
];

var options = {
    fullWidthRows: true,
    forceFitColumns: true,
    enableColumnReorder: false
};

function addGrid() {
    var data = [];
    for (var i = 0; i < 500; i++) {
        data[i] = {
            title: "Task " + i
        };
    }

    grid = new Slick.Grid("#grid", data, columns, options);
    document.getElementById('add').style.display = 'none';
}

#table {
    width: 100%;
    height: 100%;
    display: table;
    table-layout:fixed;
}