如何阻止弹性盒将其他元素推出容器？

Question

这有点难以解释，但请考虑一个带有菜单的 Flex 标题，然后右侧是固定宽度的其他内容。随着窗口尺寸宽度的缩小，菜单的空间也随之减少。最终，菜单将其他东西推出容器。

这里是工作示例。

不好

注意“其他东西”如何掉到右侧。

将

overflow: hidden

添加到菜单容器元素中，这样“其他东西”就不会被推送。然而，这当然也会阻止下拉菜单的显示。我尝试通过设置

overflow-x: hidden; overflow-y: visible

来解决这个问题，但这显然不是一个有效的设置。

更好，但没有下拉菜单

（忽略“Item 1”已被隐藏。在真实代码中，“Item 5”将被移至溢出菜单 - 不包含在此处的演示中。）

问题

如何使其像下面的示例一样工作，但不将

overflow: hidden

添加到菜单中？也就是说，我怎样才能阻止弹性盒将“其他东西”推到右边呢？

Answer 1

TL；博士。请参阅底部链接的 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

将根据需要灵活地换行。另外，为了适应环绕行为，我建议您从

.header

中删除显式高度并使用

padding

来保持一致性。

使用

@media

进行响应式布局将是您更好的长期解决方案。在这里，我建议在较小的视口上调整

.logo

和

.other-thing

的大小作为示例。在现实生活中，您可能希望引入仅限移动设备的菜单 UI（例如汉堡包按钮），而不是保持所有菜单项可见。比如说，在较小的屏幕中（< 640px), showing

50px

徽标和

200px

其他带有所有这些单独菜单项的东西根本无法优雅地工作。

请参阅此处 CodePen 示例

Answer 2

使用示例 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;
}

小提琴

Answer 3

当我找到一个包装器时，没有一个解决方案可以完成这项工作，我最终发现使用

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>