使元素占用所有可用空间

Question

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

情况：
动态生成带有字母的图块并将其添加到绿色区域。 使用CSS，它们使用flex安排在div中。 屏幕调整大小后，字母会重新排列以适应新的分辨率。

目标：
如果屏幕非常大，字母应该通过缩放占用更多空间，但仍保持其宽高比。

更新：
如果字母可以放在1行，它们应该居中并缩放，直到绿色区域的大部分被吸入（不相互重叠，因此尊重边距） 当需要2行时，字母应该均匀分布和缩放（根据两行之间的可用空间）

问题：
我假设单独使用CSS是不可能的。 与JS的混合搭配将是最佳选择。 问题是：究竟是哪种方式？

我已经包含了一个额外的功能（adjustLetters），如果有必要，可以进行一些JS调整

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

限制：
- 将显示1到10个字母 - 信件不能走出绿色区域 - 当所有字母都是1,2或3个字符或两者的组合时，它应该有效 - 这将始终以横向显示（不是真正的限制）

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

字母的长度在此数组中定义

一个完整的解决方案将是非常棒的，但是正确方向的方向当然也值得赞赏： - ）

Answer 1

我现在没有足够的时间来制作代码示例，但我至少有一个可能的解决方案。您可以通过使用将确定字体大小的数学方程式定义样式标记来获得一些JavaScript，以获得屏幕宽度/高度和字体大小。请记住，字体大小以像素为单位。