Make container shrink-to-fit child elements as they wrap

I encountered this situation where it seems the width of the text container goes full size if a word-break rule is applied.

<ul class="flex flex-col-reverse space-y-1 space-y-reverse transition-all">
  <li class="flex w-full items-end justify-between space-x-2">
    <div
      class="mb-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-blue-500"
    >
      <img
        class="rounded-full"
        src="https://randomuser.me/api/portraits/thumb/men/1.jpg"
      />
    </div>
    <div class="w-full">
      <span class="ml-1.5 text-2xs font-semibold">
        <span class="ml-1 inline-block text-3xs font-normal">2023-10-16</span>
      </span>
      <div id="here" class="w-fit max-w-56 rounded-lg bg-[#161616] px-2 py-1.5 shadow-md">
        <p class="break-words text-xs font-medium">Who’s up for a movie night this weekend?</p>
      </div>
    </div>
  </li>
  ...
</ul>

I’ve tried playing with more options for width, max-width, and min-width over the id="here" but I’m running in a loop, is there any way to fit the final length of the container to the exact amount of space the text takes?

You need to sign in to view this answers

Related Post