使用vw调整具有嵌套div的容器的大小

Question

我使用容器div作为框来封装一些信息：文本和嵌入的谷歌地图。我希望他们根据窗口大小调整大小而不会变得不合适。我正在使用vw但是当它们随窗口缩小时，盒子不再封装信息，因为它从侧面或底部溢出。这个小提琴演示了我的意思。
如果你缩小窗口大小，它们就不再以相同的边距相互封装。

HTML：

<div class="three">
 <div class="two">
  <div class="one">
  </div>
 </div>
</div>

CSS：

.one {
  width: 20vw;
  height: 20vw;
  background-color: #76ccde;
  float: left;
  margin-left: 10px;
}

.two {
  width: 25vw;
  height: 25vw;
  background-color: #c976de;
  position: relative;
  margin-left: 10px;
}

.three {
  width: 30vw;
  height: 30vw;
  background-color: #a7de76;
  float: left;
  margin-left: 10px;
}

https://jsfiddle.net/gokcLvtv/11/

提前谢谢你！