身高未知的flex父母中的一个纵横比孩子

Question

假设我们有一个带有 n 个孩子的flex容器。

如果我不知道容器的高度，是否可以将其中一个孩子变成如图所示的长宽比盒子？

有没有办法用javascript也不为容器设置高度？

为了达到这个比例，我使用以下代码段：

[style*="--aspect-ratio"] {
  position: relative;
}

[style*="--aspect-ratio"]::before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

[style*="--aspect-ratio"] > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<header class="header">
 <div>
  <!-- ... title -->
 </div>

 <!-- ... perhaps more children -->

 <div class="header__logo" style="--aspect-ratio: 1">
  <!-- ... square box -->
 </div>
</header>

我也尝试过将方形框变成绝对元素，但是内容不能保持宽高比。