TL; DR。参见底部链接的CodePen示例。

有限的空间+多个元素=不可避免的溢出内容

您的.logo占用50px，.other-thing占用200px。因为您没有将flex-wrap设置为.menu，所以它的宽度不会小于内容。这意味着，随着视口宽度的缩小，您的。header将不可避免地溢出。
将.menu设置为overflow: hidden;也不会对您有利。一旦你的Item 1和Item 5被裁剪掉，你的用户将无法滚动到它们，因为overflow: hidden;禁止它。

flex-wrap: wrap;和@media，响应更快

将flex-wrap添加到.menu将是一个良好的开端。这样，在小视口中，.menu将根据需要灵活换行。此外，为了适应 Package 行为，我建议您从.header中删除显式高度，并使用padding以保持一致性。
使用@media进行响应式布局将是您更好的长期解决方案。在这里，我建议在较小的viewport上调整.logo和.other-thing的大小作为示例。在真实的生活中，您可能希望引入一个仅限移动设备的菜单UI（例如汉堡按钮）而不是保持所有菜单项可见。比方说，在一个较小的屏幕（<640 px），显示50px徽标和200px其他东西与所有这些单独的菜单项根本不会优雅地工作。
看到这个CodePen example here

使用示例2并删除overflow-hidden类。将min-width: 0;添加到menu以修复溢出问题。然后将dropdown-menu设置为display: none;。我将一个名为item-4的类添加到menu的第一个子类中。然后你可以使用下面的CSS来显示dropdown-menu。

.dropdown-menu {
  display: none;
}

.dropdown > div.item-4:hover ~ .dropdown-menu {
  display: block;
}

Fiddle

当有一个 Package 器时，我能找到的解决方案都不能完成这项工作，我最终发现使用position: absolute解决了这个问题。

.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.col {
  overflow: hidden;
}

.col-a,
.col-b {
  flex: 0 0 40%
}

.col-c {
  flex: 0 0 20%;
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1ex;
  overflow: hidden;
  background-color: silver;
}

<ul class="flex">
  <li class="col col-a">
   Col A
  </li>
  <li class="col col-b">
   <div class="wrapper">
     Col B
     <div class="nowrap">
       Something to long that pushes out `Col C` to next line
       even with `overflow: hidden`
     </div>
   <div>
  </li>
  <li class="col col-c">
    Col C
  </li>
</ul>