font size relative to the size of parent - html

Question

I have a container which can have different sizes depending how the user moved some elements on the screen.
Inside this container there is an image and a text. The image fills out 80% of the height of the conainer and the text should fill out the other 20%.
While the height: 80% works fine for the image font-size: 20% doesn't work for the text. I can't use vm or vh since the size has nothing to do with the screen size.

Answer 1

I found this link that should be helpful: LINK
flexFont = function () {
var divs = document.getElementsByClassName("flexFont");
for(var i = 0; i < divs.length; i++) {
var relFontsize = divs[i].offsetWidth*0.05;
divs[i].style.fontSize = relFontsize+'px';
}
};
window.onload = function(event) {
flexFont();
};
window.onresize = function(event) {
flexFont();
};
#font-face {
font-family: "San Francisco";
font-weight: 200;
src: url("//applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2");
}
body, html {
height:100%;
width:100%;
font-family: "San Francisco";
font-weight: 200
}
.flexFont {
height:8em;
width:75%;
background-color:#eeeeee;
padding:1%;
margin: 10px;
}
.smaller {
font-size: 0.7em;
background-color:red;
width: 10em;
}
<div class="flexFont">
<h2>This is FlexText:<br>Autoscaling by DIV width</h2>
<div class='smaller'>... scaled by 0.7em</div>
</div>
<div class="flexFont">
<p>Font size scales parallel to the container width.<br>Change window size to test.<p>
</div>
Without the use of VM/VH you would need to use a combination of javascript and CSS to achieve this. The code above should help in what you are trying to achieve.

Answer 2

Using a percent for font-size adjusts the font based on the current font-size for the document (it doesn't adjust the font to take up a percentage of the container). Check out CSS Font-Size: em vs px vs pt vs percent.
For example:
/* current font-size for the document */
html {
font-size: 20px;
}
/* results in 4px font-size for this div */
div {
font-size: 20%;
}