Css 如何使方形div适合父div

我有一个平方div，它是由填充底部的

所平方的：100%和设置<代码>位置：绝对用于孩子。当父div的宽度大于高度时，将出现方形溢出屏幕和滚动条。有没有办法使正方形适合父div

更新
很抱歉误导了你。是的，我想把我的方形盒子放进父分区。
我已经为这个例子创建了新的js fiddle


div.stretchy-wrapper{
宽度：100%；
垫底：100%；
位置：相对位置；
不透明度：0.5；
背景：暗绿色；
}
@媒体和所有（方向：横向）{
弹力包装袋{
宽度：100vh；
高度：100vh；
填充底部：0；
}
}
div.stretchy-wrapper>div{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
颜色：黑色；
字体大小：24px；
文本对齐：居中；
}
.外部容器{
背景：红色；
宽度：400px；
高度：200px；
}
如果在
横向
模式下查看视口，则添加mediaquery以限制元素的
宽度
和
高度

@media all and (orientation: landscape) {
  div.stretchy-wrapper {
     width: calc(100vh - 20px);
     height: calc(100vh - 20px);
     padding-bottom: 0;
  }
}

换句话说：如果视口的宽度为
≥高度，为确保
1:1
纵横比，您可以将
宽度设置为
100vh
（如果需要，减去一些填充），并且
高度应等于宽度。此外，出现这种情况时，不再需要填充底部



编辑后
由于
outercontainer
的高度是固定的，因此如果视口宽度是
≥ 200px
然后将固定宽度和固定高度都设置为
200px
。否则，请使用psuedoelement保留
1:1
纵横比：


div.stretchy-wrapper:：before{
显示：块；
内容：“；
垫底：100%；
}
@介质和全部（最小宽度：200px）{
弹力包装袋{
宽度：200px；
高度：200px；
}
div.stretchy-wrapper:：before{
显示：无；
}
}
.外部容器{
最大宽度：400px；
高度：200px；
边框：1px#9cb虚线；
}
.弹性包装{
背景：公元前9世纪；
}
实现这一点的一种方法是根据视口高度（vh单位，如中所示）设置div的宽度和高度，然后根据视口高度设置最大宽度和最大高度：

    div.stretchy-wrapper {
      position: relative;
      background: darkgreen;
      width: calc(100vh - 20px);
      height: calc(100vh - 20px);
      max-width: calc(100vw - 20px);
      max-height: calc(100vw - 20px);
    }

这样，无论视口如何变化，div都将保持为正方形（但不需要mediaquery）。
您帮了我很大的忙！我绝望了！如果我把div放在固定大小的div中，这就不起作用了(（然后创建一个您需要解决的真实示例，因为您的问题中没有固定大小的div。我已经更新了问题。很抱歉误导您！此解决方案不尊重父div维度。@很抱歉，可能我误解了您的问题？据我所知，这与您从jcalderan获得的答案类似，但使用较少的lin当然，我可能会弄错。如果我将
弹性包装器
放在其他div中并设置，例如，此div的宽度，
弹性包装器
将不适合此div，因为它使用vh和wv单位来设置其大小。@microspace Aha，不，那么它将不起作用，这是真的：）需要明确的是：给弹性包装一个固定的宽度，并将其设置为与外部容器的高度相等是不可能的（当然，也可以将填充底部更改为相同数量的像素）