Adjust element dimensions, including text size, according to available space

I have a very minimalistic interface that contains two areas: a submit button area and a content area. The entire interface should always be completely visible onscreen with the user never having to scroll to see everything. While the submit button should always occupy at least a certain amount of screenspace, the content area can have anywhere between 1 and several (lets say 8) elements.

These elements should share the rest of the available vertical screen space and scale according to it, including the text displayed inside them. Making elements grow and shrink with css-flex is usually available, using it does not adjust the font-size to allow the text to grow accordingly for readability.

Is this possible in pure css or do I need to calculate the available space of an element and use js to make adjustments to the elements on the fly depending on the amount of items and the available space?

A fiddle with an example for the layout: https://jsfiddle.net/xpyLz0rv/

This needs to look the same on all devices, and on all devices it needs to fit onscreen and be legible. Yes the content of the buttons are only letters and the only lengthy text is the submit button’s label.

Example:

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content-area {
  flex-grow: 1;
}

.content-area > * {
   /* ??? */
}

.submit-area {
  flex-grow: 0;
  height: 20%;
}

<div class="container">
    <div class="content-area">
        <button>A</button>
        <button>B</button>
        <button>C</button>
    </div>
    <div class="submit-area">
        <button>Send Choice</button>
    </div>
</div>