Html 如何制作曲轴箱（不仅仅是宽度）

正如您所知，在示例中有一个Flex Box。我想在我的项目中的某个地方使用这种逻辑，并按照我的意愿对flexBox演示进行了一些更改。当你用鼠标光标缩小页面宽度时，盒子的宽度越来越小。我也希望它的高度越来越小，与宽度越来越小的比例相同。这是Google Material Grid所做的，但我不能使用它，因为我将使用这个内垫菜单，而不是覆盖整个页面的网格。在这里，我尝试用图像演示我想要什么，并在下面的代码中添加了我所做的

我试过的

当你缩小盒子时会发生什么（只有宽度变小了）

以下是我想要实现的目标（高度和宽度都对齐）：

使用“视口宽度（vw）”属性调整线条高度。在全屏上运行结果并调整浏览器窗口的大小，然后查看差异

.flex容器{
显示器：flex；
柔性包装：nowrap；
背景色：淡蓝色；
}
.flex容器>div{
背景色：#f1f1；
宽度：100%；
利润率：10px；
文本对齐：居中；
字体大小：30px；
线高：计算（20px+5vw）
}

软盒
这里有东西

如果要根据视口调整元素的大小并保持其纵横比，则需要使用javascript或jQuery来确定要应用的缩放百分比。调整窗口大小时，文本会发生什么变化？如果你想要一个纵横比div，那么你需要使用padding-top技巧：文本也应该是响应性的。它也应该更小。我可以处理它。字体大小的vw属性正是我想要的