您可以使用aspect-ratio属性来确保内部元素始终为1：1或正方形。不过，您必须在父元素上定义一些高度。

* {
  box-sizing: border-box;
}

.parent {
  width: 95vw;
  height: 100px;
  border: 2px solid #f00;
}

.child {
  aspect-ratio: 1/1;
  height: 100%;
  border: 2px solid #0f0;
}

<div class="parent">
  <div class="child">I'm 100% of parent's height and square</div>
</div>

现代浏览器有一个aspect-ratio属性。
如果你给予孩子100%的父母的高度，那么它的宽度将是相同的。
请注意，在你的代码片段中，没有父对象的真实的高度，所以我随意地给予了它一个高度，只是为了演示。在实际情况中，我希望父对象设置为100%会有一些东西可以设置自己。

<div style="width: 95vw; height: 300px; border: 2px solid #f00">
  <div style="border: 2px solid #0f0; aspect-ratio: 1 / 1; height: 100%;">I'm 100% of parent's height but also I'm not square</div>
   Get </div>

你可以利用垫顶的特性

<div class="rectangle">
  <div class="square"></div>
</div>

.square {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  background-color: red;
}

.rectangle {
  position: relative;
  width: 0;
  height: 100%;
  padding-top: 100%; 
}