Flexbox wraps outside of container [closed]

问题

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 8 months ago.

I've created a header including a navigation with flexbox. My problem is, as soon as the screen gets resized to approx. 1200px the line wraps and my navigation buttons spill outside of thecontainer - how can I fix this?

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;
}

thanks!

回答1:

Simply remove the fixed height (height: 150px;). This will let the nav resize when the menu items wrap like this:

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

来源：https://stackoverflow.com/questions/30202294/flexbox-wraps-outside-of-container