Sizing divs to fit page and figuring overflow scroll without specified height

I am struggling with element sizing on my page.

I have a column with several sections inside. The whole column has max-width set to 80vh. Inside that column there are:

First is #profilePic, which height (and width) is automatically resized according to page width.Second is #profileInfo section, which has following subsections:

First Sub. is #profileName with fixed height.Second Sub. is #profileAbout which I want to have filled up the remaining space in #profileInfo section. If the content of that section won't fit (and overflows), I want it to be scrollable.The third Sub. is #profileEmail with fixed height.

Now, since I don't know the height of #profileInfo (because of the auto-resizing profile picture), I am unable to set the max-height parameter of #profileAbout thus, the overflow-y: auto; is unable to apply, and so the content of the whole column just overflows from it.

To sum it up, I'm just trying to make the column as short as possible (when there is little 'about' content) but make it reach at max the bottom of the screen (that's where the max-height of 80vh comes from) and make the rest of the content be scrollable.

<div id="profileLeftPanel" class="card col-md-3"><div class="row"><!-- Profile pic --><div id="profilePic"><img src="<?php echo $_SESSION["someUser"]["profile_pic"] ?>" alt="[profile_pic]"></div><div id="profileInfo"><!-- Name --><h4 id="profileName"><?php echo $_SESSION["someUser"]["name"] ?></h4><!-- About --><div id="profileAbout"><?php echo $_SESSION["someUser"]["about"] ?></div><!-- Email address --><div id="profileEmail"><?php echo $_SESSION["someUser"]["email"] ?></div></div></div></div>

Here is an example of how it looks like, and what are the cases I want to solve: https://jsfiddle.net/mjnoach/zo32ra4f/