list items width not extending to contain contents when whitespace-nowrap is set and parent overflow-x-auto

Question

How can I make the first li tag have the same width as the contents?

How can I make the other li tags have the same width as the first one?

I need the overflow-auto in the parent to show the horizontal scrollbar.

Is it possible to achieve this with pure CSS? and using tailwind?

<script src="https://cdn.tailwindcss.com"></script>
<ul class="overflow-x-auto w-32">
  <li class="bg-blue-50 whitespace-nowrap">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget hendrerit nibh.
  </li>
  <li class="bg-red-50 whitespace-nowrap">foo</li>
  <li class="bg-green-50 whitespace-nowrap">bar</li>
  <li class="bg-orange-50 whitespace-nowrap">baz</li>
 <ul>

Answer 1

I found the solution without js:

<script src="https://cdn.tailwindcss.com"></script>
<div class="w-32 overflow-x-auto">
<ul class="w-min">
  <li class="bg-blue-50 whitespace-nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget hendrerit nibh.
  </li>
  <li class="bg-red-50 whitespace-nowrap">foo</li>
  <li class="bg-green-50 whitespace-nowrap">bar</li>
  <li class="bg-orange-50 whitespace-nowrap">baz</li>
 <ul>
</div>