Calculate the height of the visible part of a flex item (regardless of its content)

I'm trying to zoom children of a container to make it fit the container's height. The container is a flexbox item and may share the available space with other elements, i.e. a heading.

My problem is that I don't know how to examine the visible height of a flex item, minus the height of siblings:

I have created a codepen example here:

https://codepen.io/jmuheim/pen/GgRBMbZ

In the end, all cards should have the same height (so the first two cards' contents need to shrink even more).

I played around with scrollHeight, clientHeight, offsetHeight, getBoundingClientRect().height, but didn't succeed.

UPDATE:

Thanks to @Bergi, i found the solution. I have to manually calculate the max. height that is available to the .content element like so:

const contentHeight = parseFloat(sectionStyles.height) - content.offsetTop;

I somehow assumed that JavaScript would offer an automatically calculated property for this. I updated the CodePen, now it works very well.