Css :: Dynamic Font Size Flex 4 To Resize When Window/panel Is Resized

I have a Flex custom BorderContainer component which has text inside of it. If I were to add this in my main Application inside of a panel, the BorderContainer goes outside of the width bounds of the panel due to the text being a set size. I have all of its components in percentages so that it re-sizes when shrunk, but the one part that contains checkboxes and labels (lots of things with text) mess up since the font size doesn't change.

I am pretty positive that the results I am looking for can be done through embedding the font, though I have not been able to come up with a solution from online. I am trying to do this with a CSS style since I will be using it for many different components (I dont just want to change it in the flex code directly).

EDIT Solution:

I attempted to use the ratio as www0z0k had suggested but it caused some serious issues when it was re-sized quickly or to a small screen (the component would not re-size correctly because it was multiplying by the ratio. What finally seems to have worked for me and caused no issues was that I ran the code and found the width (1152) and height (842) of the container.

I then created a const variable of widthX = 1152 and heightY = 842 and in the onResize() function I coded the resize like this:
(where bottomGroup is the id of the borderContainer I am trying to resize)

bottomGroup.scaleX = width / widthX;;
bottomGroup.scaleY = height / heightY;

END EDIT

So far I have found some examples of embedding fonts in the <fx:Style> and attempted to remove any delaration of fontSize but that doesn't seem to work.

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@font-face {

[Code]....