How to bring options/choices div to optimal width?-CodePudding

I've setup this stackblitz

You can see in the styles.css file that I set the width of the option dropdown div to a fixed width of 650px, which works in that case

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

But I would really like to have the width adjust automatically to the length of the options currently present in the dropdown div.

When I set the width to "100%", it will not overflow the container. I've also tried "fit-content" and "auto" to no avail.

What would I need to do to achieve this?

EDIT: To be precise: The text should not wrap, it should be in one line

CodePudding user response：

I have revised the code, please check below link:

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

Here, I have modified the CSS code to make the select div dynamic.

Also, I have added 1 more dummy value option for testing. Refresh the page and test it. Please let the above example link and let me know if you find any issues.

EDIT: This is the essential part:

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