Make elements take up all available space

Question

JSFiddle: https://http://jsfiddle.net/thou6ju9/1//

Situation:
Tiles with letters are dynamically generated and added to the green zone. Using CSS, they are arranged in the div using flex. When the screen gets resized, the letters are rearranged to fit the new resolution.

Goal:
If the screen is quite big, the letters should take up more space by scaling but still keep their aspect ratio.

UPDATE:
If the letters can fit on 1 row, they should be centered and scaled until -most of the green zone is taken in (without overlapping each other, thus respecting the margins) When 2 rows are needed, the letters should be equally distributed and scaled (according to the available space between both rows)

Problem:
I'm assuming this isn't possible with CSS alone. A mixmatch with JS would be the way the go. The question is: which way exactly?

I've included an extra function (adjustLetters) where some JS adjustments could be made if it should be necessary

for (var index = 0; index < AMOUNT_OF_LETTERS; index++) {
    sContainer.append(addLetter(arrLength[index]));
}
adjustLetters();

Restrictions:
- Between 1 and 10 letters will be shown - Letters can't go outside the green zone - It should work when all letters are 1, 2 or 3 characters or a combination of both - This will be always shown in landscape orientation (not really a restriction)

var arrLength = [1, 3, 2, 1, 2, 3, 1, 2, 3, 3, 2, 2, 1, 2, 3];

The length of the letters gets defined in this array

A complete solution would be awesome, but a direction in the right direction is certainly also appreciated :-)

Answer 1

I don't have enough time right now to make a code spinet as an example, but I at least have a possible solution. You could have some JavaScript that will get the screen width/height and size up the font by defining the style tag with a math equation that will determine the font-size. remember, the font-size is in pixels.