Flexbox包装在容器外部

Question

我创建了一个包含flexbox导航的标题。我的问题是，一旦屏幕调整到大约。 1200px线路换行，我的导航按钮溢出集装箱 - 我该如何解决？

http://codepen.io/TimRos/pen/xGVwQE

.main-nav {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: flex-end;
    height: 150px;
}

谢谢！

Answer 1

只需移除固定高度(height: 150px;)即可。当菜单项包装时，这会让nav调整大小：

.main-nav {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: flex-end;
}