如何清除菜单中有大项目时出现的多余空间

Question

如何删除菜单中有大项目时出现的多余空间，如下图所示：

因此，如何使菜单项自动出现在正确的位置（自动调整），每当有空格时，菜单项都应拉到顶部以隐藏多余的空格，如下面的图片所示：

这是问题的摘要，如果运行它，您将看到item4如何将其他项目推到底部：

.menu 
{
     display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    width:500px;
    flex-wrap:wrap;
}

.menu .item {
   flex-basis: 220px;
    height: auto;
}

<ul class="menu">
  <li class="item">Item1</li>
  <li class="item">Item2</li>
  <li class="item">Item3</li>
  <li class="item">
      Item4
      <ol>
          <li class="sub-item"> Sub Item 1</li>
          <li class="sub-item"> Sub Item 2</li>
          <li class="sub-item"> Sub Item 3</li>
          <li class="sub-item"> Sub Item 4</li>
          <li class="sub-item"> Sub Item 5</li>
      </ol>
  
  </li>
   <li class="item">Item5</li>
  <li class="item">Item6</li>
  <li class="item">Item7</li>

</ul>

先谢谢了。