将div调整为容器中可能的最大正方形

如何使用CSS将div调整为其容器中最大的可能方块？如果CSS无法实现,那么如何使用Javascript呢？

如果容器有height > width我希望广场的大小width x width.如果容器有width > height我想要的大小正方形height x height.

当容器的尺寸改变时,儿童的尺寸应相应地调整.

我发现这个答案有助于维持孩子的长宽比.当容器的宽度大于子容器溢出父级时的高度时,此方法不起作用,如下面的代码片段所示.

.flex {
  display: flex;
}

.wide,
.tall {
  flex: none;
  border: 3px solid red;
}

.wide {
  width: 150px;
  height: 100px;
}

.tall {
  width: 100px;
  height: 150px;
}

div.stretchy-wrapper {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  background: blue;
}

div.stretchy-wrapper>div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  font-size: 24px;
  text-align: center;
}

  

    

      
Wide container
    
  
  

    

      
Tall container