CSS根据高度设置宽度（反之亦然）

Question

我在页面中有一个元素，该元素使用材质ui的GridList渲染图像网格。

<Container>
    <GridList className={classes.grid} cellHeight="auto" cols={colSize}>
        {representatives.map((element) => this.renderTile(element))}
    </GridList>
</Container>

只要父div的高度大于父div的宽度，此方法就可以完美地工作。基本上，GridList会根据GridList的宽度动态缩放自己。父宽度越大，网格本身越大。如果太大，就会超出范围。

因此，我认为创建一个宽度等于或小于高度的容器div很简单。且高度为父级身高的100％。显然，人们通常以相反的方式缩放（根据宽度设置高度）。而且，此元素只是页面的一小部分，而不是整个页面，因此我认为vh不能在这里为我提供帮助。无论如何，我该如何实现？