這有點難以解釋，但是考慮一個帶有菜單的flex標題，然后右邊是固定寬度的其他內(nèi)容。隨著窗口寬度的縮小，菜單的空間就變小了。最終，菜單將其他東西推出容器。

這里是工作示例。

嚴重的

請注意& quot其他事情& quot向右傾斜。

將overflow: hidden添加到菜單容器元素中會使& quot其他事情& quot不會被逼迫。然而，這也阻止了下拉菜單的顯示，當然。我試圖通過設(shè)置overflow-x: hidden來解決這個問題；溢出-y:可見，但這顯然不是一個有效的設(shè)置。

更好，但沒有下拉菜單

(忽略那個& quot項目1 & quot一直隱藏著。在真正的代碼& quot項目5 & quot將被移動到一個溢出菜單-不包括在這里的演示。)

問題

我怎樣才能讓它像下面的例子一樣工作，但不在菜單中添加溢出:隱藏？也就是說，我怎樣才能阻止flex-box按下& quot其他事情& quot向右走？

TL；DR .查看底部鏈接的CodePen示例。

有限的空間+多種元素=不可避免的溢出內(nèi)容 你的。徽標占用50px的空間。其他東西占200px。因為您沒有將flex-wrap設(shè)置為。菜單，它的寬度不會比內(nèi)容小。這意味著，隨著視窗寬度縮小，您的。表頭必然會溢出。

設(shè)置您的。溢出菜單:隱藏；也不會對你有利。一旦你的項目1和項目5被裁剪出來，你的用戶將無法滾動到他們，因為溢出:隱藏；禁止它。

flex-wrap:纏繞；和@media實現(xiàn)更好的響應(yīng) 將柔性包裝添加到。菜單會是一個好的開始。這樣，在小視口中。菜單將根據(jù)需要靈活換行。此外，為了適應(yīng)換行行為，我建議您從。頁眉并使用填充以保持一致性。

使用@media進行響應(yīng)式布局對你來說會是一個更好的長期解決方案。這里我建議調(diào)整。標志和。以小視角為例。在現(xiàn)實生活中，你可能想引入一個移動專用的菜單UI(比如漢堡按鈕)，而不是保持所有菜單項都可見。比方說，在較小的屏幕上(& lt640像素)，顯示50像素的徽標和200像素的其他東西，所有這些單獨的菜單項根本不會優(yōu)雅地工作。

請參見此處的CodePen示例

使用示例2并移除溢出隱藏類。添加最小寬度:0；以修復(fù)溢出問題。然后設(shè)置下拉菜單顯示:無；。我添加了一個名為item-4的類到你的第一個子菜單中。然后你可以使用下面的CSS來顯示下拉菜單。

.dropdown-menu {
  display: none;
}

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

小提琴

當有一個包裝器時，我所能找到的解決方案都不能完成工作，我最終發(fā)現(xiàn)使用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>