javascript - 如何将选项/选择 div 调整到最佳宽度？

Question

我已经设置了这个 stackblitz

您可以在 styles.css 文件中看到，我将选项下拉 div 的宽度设置为固定宽度 650px，这在这种情况下有效

@import '~bootstrap/dist/css/bootstrap.min.css';

.my_choices_inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding: 0;
  margin-top: -2px;
  min-height: 44px;
  overflow: hidden;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  word-break: break-word;
  width: 650px;
}

.choices {
  margin-bottom: 0;
}

但我真的很想让宽度自动调整为下拉 div 中当前存在的选项的长度。

当我将宽度设置为“100%”时，它不会溢出容器。我也试过“fit-content”和“auto”都无济于事。

我需要做什么才能实现这一点？

编辑:准确地说:文本不应该换行，应该在一行中

Answer 1

我修改了代码，请查看以下链接:

https://stackblitz.com/edit/js-vb71zr?file=style.css,index.js,package.json

在这里，我修改了 CSS 代码，使选择的 div 成为动态的。

此外，我还添加了 1 个虚拟值选项用于测试。刷新页面并测试它。请提供上面的示例链接，如果您发现任何问题，请告诉我。

编辑:这是最重要的部分:

.choices__list--dropdown,
.choices__list[aria-expanded] {
  word-break: break-word;
  width: max-content;
}