Javascript 将cytoscape div高度分配为父级的剩余高度

我使用cityscape在div中呈现一个图形

<div class='container'>
<div id='inputContainer'></div>
<div id='cy'></div> 
</div>

我尝试了flex方法来指定th cy div，剩余高度

#cy {
        position: absolute;
        width: 97%;
        z-index: 999;
        flex: 1;
    }

    #inputContainer {
        height: 20%;
    }

    .container {
        display: flex;
        flex-direction: column;
    }

---

这样，图形就不会被渲染。我注意到图形div的高度是0px。calc方法似乎也不起作用。请您帮助我如何基本上制作id为“cy”的div，并将高度作为类为“container”的父div中的剩余高度。是否有一种方法可以在触发resize事件时，计算#inputContainer div的高度，并将高度分配给#cy div为：（height of.container div）-（height of#inputContainer div）

如果#cy处于绝对位置，它不再是其父流的一部分，它也不再充当flex子流，.container将需要一个高度，高度：20%，因为#inputContainer有一个值，可以计算。@G-Cyr，感谢您的回复。我确实向.container添加了height属性。当我缩小div时，仍然会看到一点溢出。此外，cytoscape框架似乎有一个问题，因为只有当我将div的位置设置为绝对或固定时，才会渲染图形。使用固定位置是否有助于弯曲？这是否回答了您的问题？嘿@StephanT.，所以当div或window调整大小时，我会执行cy.resize（）和cy.fit（）。但在我的例子中，#inputContainer div是无响应的。因此，我希望调整div的大小时#cy div会占用剩余的空间。这就是我尝试灵活方法的原因。目前，我的#cy div可以放在parent.container div中，但它与#inputContainer div重叠，即使我给它20%的高度，Cytoscape没有响应，初始化后对父元素的更改也不会起任何作用，正如我所说的。您必须倾听父元素的高度变化，并根据该变化调整cy元素的大小。我想，使用间距组件的方法是可以的，但您也可以使用cytoscape组件作为容器，并在那里设置高度？如果#cy处于绝对位置，它就不再是其父对象流的一部分，它也不再充当flex子对象。容器将需要高度，高度：#inputContainer的20%有意义，可以计算。@G-Cyr，谢谢回复。我确实向.container添加了height属性。当我缩小div时，仍然会看到一点溢出。此外，cytoscape框架似乎有一个问题，因为只有当我将div的位置设置为绝对或固定时，才会渲染图形。使用固定位置是否有助于弯曲？这是否回答了您的问题？嘿@StephanT.，所以当div或window调整大小时，我会执行cy.resize（）和cy.fit（）。但在我的例子中，#inputContainer div是无响应的。因此，我希望调整div的大小时#cy div会占用剩余的空间。这就是我尝试灵活方法的原因。目前，我的#cy div可以放在parent.container div中，但它与#inputContainer div重叠，即使我给它20%的高度，Cytoscape没有响应，初始化后对父元素的更改也不会起任何作用，正如我所说的。您必须倾听父元素的高度变化，并根据该变化调整cy元素的大小。我想，使用间距组件的方法是可以的，但是您也可以使用cytoscape组件作为容器，并在那里设置高度？

#cy {
        position: absolute;
        width: 97%;
        z-index: 999;
        flex: 1;
    }

    #inputContainer {
        height: 20%;
    }

    .container {
        display: flex;
        flex-direction: column;
    }