CSS：max-width不会包裹绝对容器

Question

我已经玩了几个小时，没有成功。

我有一个带子菜单的顶级菜单（包含一个弹出菜单）。

在我的一个弹出菜单中，我需要容器最大宽度为170像素，并且所有项目都要包围该宽度。由于某种原因，他们不会结束。

我在小提琴中复制了确切的菜单。请注意子菜单COUNTRY。它包含一个带有标志的弹出窗口，但它们不会包裹

https://jsfiddle.net/h81y2t0L/

我添加了宽度，最小宽度，白色空间等属性但没有成功

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

Demo