My goal is make the text "ChatGPT" shrink to zero 0px first when there is not enough width space then the title text after.
I tried: flex-shrink: 999https://play.tailwindcss.com/6JLCwJuFMI?size=314x720
<div class="flex flex-shrink-0 items-center gap-2 p-4" style="width: 100%;"><button class="flex-shrink-0 rounded-full p-2 transition-colors hover:bg-white/10" title="Menu"><div class="w-4 h-4 bg-red-500 rounded"></div></button><div class="group relative max-w-[calc(100%-110px)]"><button class="flex w-full items-center rounded p-1.5 text-left transition-colors hover:bg-white/10"><div class="inline-flex max-w-full items-center"><span class="text-chatgpt-text mr-1 min-w-0 flex-shrink-[1] truncate text-sm font-medium">Airport Lost and Found</span><div class="w-3 h-3 bg-yellow-500 rounded flex-shrink-0"></div></div></button></div><div class="ml-auto flex flex-shrink-999 items-center gap-2" style="flex-shrink: 999; flex-basis: 1px;"><div class="flex w-full"><button class="bg-chatgpt-input hover:bg-chatgpt-send-button-hover text-chatgpt-text flex max-w-[150px] items-center rounded-lg p-2 px-3 transition-colors min-w-0"><span class="mr-2 flex-shrink-0"><div class="bg-blue-500 relative h-6 w-6 overflow-hidden rounded-full"></div></span><span class="mr-1 min-w-0 flex-1 truncate text-base font-medium" style="min-width: 0;">ChatGPT</span><div class="w-3 h-3 bg-green-500 rounded flex-shrink-0 ml-1"></div></button></div><button class="group relative rounded-full p-2 transition-colors hover:bg-white/10"><div class="w-4 h-4 bg-purple-500 rounded opacity-70 hover:opacity-100"></div><span class="absolute -bottom-6 left-1/2 z-50 -translate-x-1/2 transform rounded bg-gray-800 px-2 py-0.5 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100">New chat</span></button></div></div>But it does not work as intended. The title always shrink first.
The expected result should look like this on small screen size :
Then if I keep reducing the screen size, the title should shrink gradually