Html Css：如何将高度设置为100%的宽度

我试图只用css制作一个水平滚动条，但遇到了一个问题，我需要将div元素的高度设置为父元素宽度的100%。以下是水平滚动部分的示例代码：

.水平滚动：：-webkit滚动条{
显示：无；
}
.水平卷轴{
宽度：100px；
身高：97vw；
变换：旋转（-90度）translateY（-100px）；
溢出x：隐藏；
溢出y：自动；
边框：5px纯黑；
变换原点：右上角；
}
.卡片{
高度：100px；
宽度：100px；
背景色：aliceblue；
变换：旋转（90度）；
显示：块；
}
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.

指的是这个

纵横比为1:1
.盒子{
位置：相对位置；
宽度：20%；
/*期望宽度*/
保证金：5px；
}
.盒子：以前{
内容：“；
显示：块；
填充顶部：100%；
/*初始比例为1:1*/
}

指的是这个

纵横比为1:1
.盒子{
位置：相对位置；
宽度：20%；
/*期望宽度*/
保证金：5px；
}
.盒子：以前{
内容：“；
显示：块；
填充顶部：100%；
/*初始比例为1:1*/
}

<div class='content'>Aspect ratio of 1:1</div> 
</div>

.box {
  position: relative;
  width: 20%;
  /* desired width */
  margin: 5px;

 }

.box:before {
  content: "";
  display: block;
  padding-top: 100%;
  /* initial ratio of 1:1*/
}