I have come up with a javascript solution that works, but a pure CSS solution would be better.
When the page is bigger width wise, the square should adapt to fit fully with the everything visible. When the page is vertical, the square should still fit to be completely visible.