CSS：最大寬度不會環繞絕對容器

Question

我已經玩了幾個小時，沒有成功。

我有一個帶有子菜單的頂層菜單（包含一個彈出菜單）。

在我的彈出菜單之一中，我需要容器的最大寬度為170像素，並且所有項目都要圍繞該寬度包裝。 由於某些原因，他們沒有結束。

我已經在小提琴中復制了確切的菜單。 注意子菜單COUNTRY 。 它包含帶有標志的彈出窗口，但它們不會環繞

我添加了寬度，最小寬度，空白等屬性，但沒有成功

.flagMenu {
  max-width: 170px;
  /* white-space: normal; */
}

.flagMenu li {
  display: inline-block;
}

如何包裝容器中的標志？

Answer 1

要包裝內聯塊，您需要定義一個容器寬度-但由於您不希望有確切的寬度，因此可以使用width: max-content; 這樣，寬度將等於內容的寬度，但是最大寬度將阻止其進一步增長。

.flagMenu {
  max-width: 170px;
  white-space: normal;
  width: max-content;
}

演示