在弹性框中划分为方形

Question

我有一个CSS问题,我不知道如何解决.情况如下.我有一个<div>flex-item,它垂直拉伸,以便填充其flex-container的可用高度.根据浏览器窗口的大小,这<div>是一个矩形,有时高于宽,有时比高.

现在我想把另一个<div>放在这个矩形的内部,它应该是一个正方形.相对于周围的矩形,它应该尽可能大,但必须始终完全可见.

创建正方形的典型方法padding-bottom是将百分比值设置为(与宽度相同的百分比值).这实际上创建了一个正方形,但由于在这种方法中高度始终遵循宽度,如果宽度超过高,它会拉伸出矩形.

我怎样才能解决这个问题,以便广场总是包含在由flexbox计算的矩形大小的边界内,理想情况下不使用JavaScript？

更新:同时,我使用JavaScript解决了它,但我仍然对纯CSS解决方案感兴趣,如果有的话.

Answer 1

不确定这是否是您正在寻找的...

.flex {
  display: flex;
}
.item {
  width: 50%;
}

.square {
  width: 100%;
  background: red;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="flex">
  <div class="item">
    <div class="square">
      
    </div>
  </div>
  <div class="item">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>