创建一个高度和宽度与包含div一起缩放的正方形

Question

我正在尝试为给定的div创建一个最大可能大小的正方形。因此，正方形将伸展宽度和高度，直到它到达div的边缘。

我目前所拥有的（http://codepen.io/andyjessop/pen/RryXpv）是一个正方形，它将宽高比保持宽度变化，但这里正方形的宽度和高度仅由包含div的宽度决定，因此，如果您更改外部div的高度（通过调整窗口大小），则方形大小保持不变并离开屏幕。

#square {
  position: relative;
  width: 50%;
  margin: auto;
  background: white;
}

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

如何制作广场的尺寸也可以包含div高度？