Javascript 使元素占据所有可用空间

JSFiddle：

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

目标：
如果屏幕相当大，字母应该通过缩放占据更多的空间，但仍然保持其纵横比

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

问题：
我假设单凭CSS是不可能做到这一点的。 与JS的混搭是最好的选择。 问题是：到底哪条路

我已经包括了一个额外的函数（adjustLetters），如果有必要，可以在其中进行一些JS调整

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

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

---

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

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

是否需要类似的字体？@divy3993 Oww，似乎我忘了添加限制。绿色区域将调整大小，不应是静态的。这是一个更大的东西的一部分，所以可能会产生很大的混乱，所以你想要10块瓷砖，什么形状，我的意思是每行3块瓷砖，或者全部在一行上，或者其他什么。这就是事情变得复杂的地方，我已经用额外的信息更新了我的帖子。我建议用一些有用的信息来扩展你的答案。谢谢你的建议。我马上就来，现在没时间。

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