如何将div与子元素垂直对齐？

Question

在我的应用中，某些div应该垂直对齐以垂直滚动浏览器。以下代码片段很好地演示了这一点。我的问题是，当我在div中添加.modules时，垂直对齐结构崩溃了，我该如何解决？

.container {
  width: 100%;
  height: 100%;
  background: yellow;
  white-space: nowrap;
}

.modules {
  margin: 5px;
  border: 1px solid;
  width: 300px;
  height: 300px;
  display: inline-block;
}

.sub-modules {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="container">

  <div class="modules">

    <div class="sub-modules">
      sub
    </div>
    
    <div class="sub-modules">
      sub
    </div>
    
  </div>

  <div class="modules">

  </div>

</div>