DIV缩放后变为矩形

Question

我有一个名为square的DIV，当以超过500px的宽度观看时，它像正方形一样。

.squareholder {
display: flex;
width: 80%;
justify-content: center;
margin-left: auto;
margin-right: auto;
}

.square {
width: 12vw;
height: 12vw;
margin-left: 1vw;
margin-right: 1vw;
background-color: #ff0000;
border-radius: 2vh;
align-content: center;
}

@media only screen and (max-width: 500px) {
.square {
width: 30vh;
height: 30vh;
margin-left: 1vw;
margin-right: 1vw;
background-color: #ff0000;
border-radius: 2vh;
align-content: center;
}
}

<div class ="squareholder">
<div class ="square"><h1>Text</h1></div>
</div>

正常观察时，DIV为正方形。调整窗口大小时，它会拉长。

有什么想法为什么要使height和width属性保持不变？

我知道这与flex有关，但是如果我连续添加三个；

.squareholder {
display: flex;
width: 80%;
justify-content: center;
margin-left: auto;
margin-right: auto;
}

.square {
width: 12vw;
height: 12vw;
margin-left: 1vw;
margin-right: 1vw;
background-color: #ff0000;
border-radius: 2vh;
align-content: center;
}

@media only screen and (max-width: 500px) {
.square {
width: 30vh;
height: 30vh;
margin-left: 1vw;
margin-right: 1vw;
background-color: #ff0000;
border-radius: 2vh;
align-content: center;
}
}

<div class ="squareholder">
<div class ="square"><h1>Text</h1></div>
<div class ="square"><h1>Text1</h1></div>
<div class ="square"><h1>Text2</h1></div>
</div>

所有方框均排成一行。我需要它们仍然连续，只是在较小时保持正方形。我认为这与display: flex;的使用有关，但是我不确定其他解决方案是否会将其保留为[] [] []

而不是；

[] [] []

调整浏览器宽度的大小。

预先感谢：）

Answer 1

这是因为对于小屏幕，宽度会不断缩小，而高度相同。在媒体查询中使用vh试图适应这种情况，它会创建一个矩形。

如果要防止红色正方形在较小的屏幕上变成矩形，我会让您的CSS统一。

在这里拨弄：https://jsfiddle.net/vxgsq15u/