创建始终保持纵横比和容器的设置宽度的响应式方形框

Question

我正在尝试创建始终保持1：1比例的盒子，同时还要占用其容器内的空间。例如。

一个简单的行，带有3个框，其宽度是总宽度的1/3，但是我不确定如何根据此宽度正确确定适当的高度以使无线电保持1：1。

<div class="container">
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box green"></div>
</div>

.container { 
  max-width:36em;
  margin-left:auto;
  margin-right:auto;
}

.box { 
  width: 33%;
}

另一种解决方案是创建固定的金额，例如150px by 150px，但这不是很动态。

我尝试使用诸如width:20vw;和height:20vh之类的方法，但这还不够安全，因为视图窗口可能会扭曲值并再次设置错误的比率。

我通过使用padding-top:100% 1：1来找到资源，但这似乎也很困难22。

这是一个仅在行中仅包含3个项目的示例，但是如果我放入或少于3个项目该怎么办？

我已经能够创建一个不错的UI，并且仅在关键的@media点使用硬编码值，但是这又显得有些野蛮。

是否有一个好的，干净且容易的解决方案？