Как удалить лишнее пространство, которое появляется, когда в меню есть большой элемент

.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>