how to make dropdown option width to adjust to it's longest content using bootstrap 5?

Question

I'm trying to apply an autoComplete feature on my web app but I can't seem to find a way to make the options to adjust to the longest content.

the only thing I can do is to make it into a fixed length using this css:

.autocomplete-suggestions li {
  width: 100%;
  max-width: 300px;
}

but then the content of the option would get cut off.. how do I make it show the entire content instead?

Answer 1

I finally got it to work as I hope after tinkering with the css before and I'd like to share a bit what I found out. hopefully this answer will help someone in need.

I used these css:

.autocomplete-suggestions {
  display: inline-block;
  overflow-y: scroll;
  overflow-x: visible;
}
.autocomplete-suggestions li {
  display: block;
  width: 100%;
  white-space: nowrap;
}

the html structure are more or less like this:

<div class="autocomplete-suggestions">
  <li class="suggestion" role="option">my name</li>
  <li class="suggestion" role="option">this is a longer version of my name</li>
  <li class="suggestion" role="option">this is a shorter content</li>
</div>

I'm still not 100% sure which css rules made it work.. but hey, as long as it works, right?