【发布时间】：2019-04-24 03:03:05
【问题描述】：
我创建了一个标题，包括一个带有 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;
}
谢谢！
【问题讨论】：
-
这取决于您希望导航的行为方式。它应该保持不变并突破包含元素的左侧吗？还是应该包裹成两行或多行都应该可见的？
-
理想情况下，它会换行成更多行，但仍被限制在其容器中，因此在媒体查询启动并将整个标题转换为列之前它仍然可用。左边的空间是一个带有背景图片的标志，所以应该仍然远离任何其他元素
-
好吧，那么问题来了，下面的内容会发生什么？无论如何，这似乎在 Firefox 中有效，尽管快速检查告诉我它在 IE 中可能看起来不同：http://codepen.io/anon/pen/XbdXJj
-
谢谢这绝对有帮助 - 我意识到问题是 .main-nav flexbox 容器的固定高度。将容器设置为最大高度：200px；而不是 height: 150px 将允许导航项打破限制在容器中（在此过程中在徽标下方创建一条丑陋的可用空间线......也许可以通过拉伸徽标来解决？）
-
标志绝对有必要成为导航的子
- 吗？由于它实际上并不是流程的一部分，因此您可以考虑将其放在导航之外并单独处理导航。这样您就可以将徽标绝对定位在容器的底部，无论它可能在哪里