html - CSS:最大宽度不会环绕绝对容器

Question

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

我有一个带有子菜单的顶部菜单(包含弹出菜单)。

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

我用 fiddle 复制了确切的菜单。请注意子菜单COUNTRY。它包含一个带有标志的弹出窗口，但它们不会环绕

https://jsfiddle.net/h81y2t0L/

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

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

.flagMenu li {
  display: inline-block;
}

如何环绕容器中的标志？

Answer 1

要包装内联 block ，您需要定义容器宽度 - 但由于您不需要精确的宽度，请使用 width: max-content; 这样宽度将等于内容的宽度，但最大宽度将阻止其进一步增长。

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

Demo