CSS-only square div fitting inside rectangle div

Question

I have determined how to set a div height based on its width (using percentage width and padding-bottom). But I also need to be able to set a div width based on its height.

Answer 1

If you can use min and the parent is your rect then you could do this:

.rectangle {
  width: 100vw;
  height: 100vh;
}

.square {
  width: min(80vw, 80vh);
  height: min(80vw, 80vh);
}