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">