html - flexbox 如何找出 "remaining space"的绝对单位是多少

Question

我有这个问题，我不知道如何面对。

有一个 flexbox，面向列，它有三个 child :top、middle 和 bottom。在中间的 child 中，我需要嵌套一个第三方组件，该组件需要以绝对单位(例如 px)知道其容器的大小以正确呈现。

我能想到的唯一解决办法是在CSS引擎计算后以某种方式找出中间容器的大小(以像素为单位)，然后使用js设置大小。

更糟糕的是，如果以百分比设置高度，组件将无法正常工作

所以，

<div id="componentPlaceHolder" style="height: 10%;"></div>

不起作用。你必须做一些类似的事情

<div id="componentPlaceHolder" style="height: 455px;"></div>

我怎样才能做到这一点？

Answer 1

可以用JS来确定中间div的高度:

var middleDivHeight = getElementById("middleDivId").css( "height" );

这将返回一个以px为单位的数字，然后你可以用JS设置组件的高度:

document.getElementById("componentId").style.height = middleDivHeight;