How can I hide flex items when it overflows the flex parent?

A workaround for your problem would be to add following CSS code:

#top-nav div.menu > ul {
  flex-wrap: wrap;
  height: 34px;
  overflow: hidden;
}

If you want to know which elements got hidden, you should solve your problem using Javascript/jQuery, because you cannot know that using CSS.