flexbox как узнать сколько стоит «оставшееся место» в абсолютных единицах

Question

У меня есть проблема, с которой я не знаю, как с ней справиться.

Существует flexbox, ориентированный на столбцы, который имеет три дочерних элемента: верхний, средний и нижний. В промежуточном дочернем элементе мне нужно вложить сторонний компонент, который требует знать в абсолютных единицах (например, 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;