如何使两个div具有相同的高度，其中一个必须保持正方形纵横比？

<div class="container">
  <div class="square"></div>
  <div class="content">
    <!-- 这里可以放置你的内容 -->
  </div>
</div>

.container {
  display: flex;
  align-items: stretch; /* 使子元素高度相同 */
}

.square {
  width: 50%; /* 设置宽度为50% */
  padding-bottom: 50%; /* 设置padding-bottom为50%，保持正方形纵横比 */
  background-color: red; /* 设置背景颜色以便观察效果 */
  position: relative;
}

.content {
  width: 50%; /* 设置宽度为50% */
  background-color: blue; /* 设置背景颜色以便观察效果 */
}