当高度未知且高度不同时，如何使CSS宽度与高度相同（高度取决于其他动态因素）？

Question

有关元素（具有“子”类的元素）的高度等于其同级内容（由invokeAll由其父元素设置）的高度。代码如下所示

align-items: stretch的高度是自动设置的，可能会有所不同。我希望此元素的宽度始终与其高度匹配。 简而言之，我希望div.child始终是正方形。

演示的Codepen链接-> https://codepen.io/pen/?editors=1100

div.child

.parent {
    display: flex;
    align-items: stretch;
}

.parent .child {
    border: 1px solid black;
}