javascript - Make elements take up all available space -

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

situation:
tiles letters dynamically generated , added green zone. using css, arranged in div using flex. when screen gets resized, letters rearranged fit new resolution.

goal:
if screen quite big, letters should take more space scaling still keep aspect ratio.

update:
if letters can fit on 1 row, should centered , scaled until -most of green zone taken in (without overlapping each other, respecting margins) when 2 rows needed, letters should equally distributed , scaled (according available space between both rows)

problem:
i'm assuming isn't possible css alone. mixmatch js way go. question is: way exactly?

i've included function (adjustletters) js adjustments made if should necessary

for (var index = 0; index < amount_of_letters; index++) {     scontainer.append(addletter(arrlength[index])); } adjustletters(); 

restrictions:
- between 1 , 10 letters shown - letters can't go outside green zone - should work when letters 1, 2 or 3 characters or combination of both - shown in landscape orientation (not restriction)

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

the length of letters gets defined in array

a complete solution awesome, direction in right direction appreciated :-)

i don't have enough time right make code spinet example, @ least have possible solution. have javascript screen width/height , size font defining style tag math equation determine font-size. remember, font-size in pixels.