Javascript 设置一个div'；s高度等于计算的宽度

这是我的代码（解释如下）：

正文{
宽度：1920像素；
高度：1080px；
背景色：rgb（48,48,48）；
保证金：0；
填充：0；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
调整项目：灵活启动；
调整内容：灵活启动；
}
/*整体风格*/
.组容器{
显示器：flex；
弯曲方向：立柱；
}
.组标题{
高度：40px；
背景色：rgb（21101192）；
}
.集团机构{
柔性生长：1；
显示器：flex；
}
.瓷砖{
显示器：flex；
弯曲方向：立柱；
}
.瓷砖头{
背景色：rgb（25118210）；
}
.砖体{
柔性生长：1；
}
/*第一组*/
#第一组{
宽度：50%；
顺序：1；
右边框：3倍纯黑；
底部边框：3倍纯黑；
}
#第1组。团体{
柔性包装：包装；
调整项目：灵活启动；
调整内容：灵活启动；
}
#第1组：瓷砖{
宽度：计算值（100%/3）；
高度：300px；/*占位符：实际值必须等于宽度*/
}
/*第2组*/
#第2组{
宽度：50%；
顺序：2；
柔性生长：1；
右边框：3倍纯黑；
边框顶部：3件纯黑；
}
#第2组.团体{
弯曲方向：立柱；
调整项目：灵活启动；
}
#第2组：瓷砖{
柔性生长：1；
宽度：100%；
身高：100%；
}
/*第3组*/
#第三组{
宽度：50%；
身高：100%；
顺序：3；
左边框：3倍纯黑；
}
#第三组：团体{
弯曲方向：立柱；
}
#第3组：瓷砖{
柔性生长：1；
宽度：100%；
身高：100%；
}

第一组
瓷砖1A
瓷砖1B
瓷砖1C
瓷砖1D
地砖1E
地砖1F
第2组
瓷砖2A
瓷砖2B
第3组
瓷砖3A

感谢ovokuro将包含适合我目的的答案的问题链接到我这里，但由于答案在该问题的注释中，因此我将其作为正确答案重新发布在这里：

.outer{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
}
#容器{
位置：相对位置；
弹性基准：20%；
外形：1px实心#eee；
文本对齐：居中；
}
#假人{
利润率最高：100%；
}
#元素{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景颜色：银色；
}

一些文本
一些文本2
一些文本3
一些文本4
一些文本5
一些文本6
一些文本7
一些文本8
一些文本9

当你说应该在不同的分辨率/介质上渲染时，你的布局应该是响应的，对吗？假设分辨率非常小，那么Group1/Group2/Group3是否会相互堆叠？这有帮助吗@我认为当使用flexbox CSS时，它们不会互相堆叠？无论如何，决议不会那么小。部署的系统将用于客户的日常操作，并计划全屏使用。它将以客户指定的高清分辨率显示。