Need some help with TailwindCSS making search box 100% resizable, but it does not minimize after certain point
After that as you can see in the below image, GROW class in the parent FLEX paints over other UI elements even though there are more width of the input element that could be minimized.
TailwindCSS playground: https://play.tailwindcss.com/olAP85kNj5
What I am trying to achieve ideally, is search box to minimize until at a size of search icon, based on available space. But I was not able to make it work
I tried setting max-width for different screen sizes but that makes it super hard to maintain because it needs to be adjusted all the time I add or remove UI elements.
<div class="relative w-full text-black">
<div class="fixed z-10 flex w-full place-items-center justify-evenly space-x-2 bg-white py-1 px-2">
<!-- logo -->
<a href="#" class="shrink-0 py-1 xxs:py-0">
<img src="https://img.icons8.com/?id=Anfe8KxqmeL4&size=2x&color=000000" class="shrink-0" width="25" height="25" />
</a>
<!-- main sections -->
<div class="flex items-center">
<a href="/idea" class="menu-item items-center">
<img src="https://img.icons8.com/color/452/group-foreground-selected.png" width="30" height="30" />
<span class="hidden xxxs:block">Authors</span>
</a>
<div class="divide"></div>
<a href="/idea" class="menu-item">
<img src="https://img.icons8.com/cotton/452/innovation.png" width="30" height="30" />
<span class="hidden xxs:block">Idea</span>
</a>
<div class="divide"></div>
<a href="/idea" class="menu-item">
<img src="https://img.icons8.com/ios-glyphs/344/combo-chart--v1.png" width="22" height="22" />
<span class="hidden xxs:block">Standings</span>
</a>
</div>
<!-- search 100% dynamic width -->
<label class="relative flex w-auto grow rounded text-gray-400 focus-within:text-gray-600">
<img src="https://img.icons8.com/cotton/452/search--v2.png" class="pointer-events-none absolute top-1/2 left-1 h-6 w-6 -translate-y-1/2 transform" width="25" height="25" />
<input id="search" type="search" placeholder="Search" class="form-input w-full appearance-none rounded border border-gray-400 bg-white py-1 pl-8 text-sm text-gray-500 placeholder-gray-400 focus:border-cyan-600 focus:outline-none xxs:pr-4" />
</label>
<!-- end of search -->
<a href="/idea" class="flex shrink-0 space-x-1">
<img src="https://img.icons8.com/plumpy/344/appointment-reminders--v1.png" width="20" height="20" />
<span class="hidden animate-pulse text-sm font-medium text-cyan-700 lg:block"> [ 11 ] </span>
</a>
<!-- user -->
<div class="flex cursor-pointer place-items-center space-x-2 rounded rounded-l-full pr-2 text-cyan-700">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 508 508" style="enable-background:new 0 0 508 508" xml:space="preserve">
<circle style="fill:#84dbff" cx="254" cy="254" r="254" />
<path style="fill:#2b3b4e" d="M455 409a253 253 0 0 1-402 0l11-69 136-71v2l-36 39 22 16-27 15 95 149 95-149-27-15 22-16-36-39v-1l136 70 11 69z" />
<path style="fill:#324a5e" d="m349 341-95 149 39-168 3 7s14-29 12-57l36 38-22 17 27 14zM159 341l27-15-22-16 36-39c-2 29 12 58 12 58l3-7 39 168-95-149z" />
<path style="fill:#e6e9ee" d="m293 322-39 168-39-168c13-24 39-21 39-21s26-3 39 21z" />
<path style="fill:#f1543f" d="M254 301zM278 307l-9 19h-30l-9-19c12-7 24-5 24-5s12-2 24 5z" />
<path style="fill:#ff7058" d="m274 402-20 88-20-88 5-76h30z" />
<path style="fill:#f9b54c" d="M296 244c-2 9-9 28-42 57-28-27-38-45-41-55 11 15 25 25 41 25s30-11 42-27z" />
<path style="fill:#fff" d="M296 329c-12-31-42-28-42-28 32-29 40-47 42-56l2-3c23 32-2 87-2 87zM254 301s-30-3-42 28c0 0-26-56-2-87l3 4c3 10 13 28 41 55z" />
<path style="fill:#ffd05b" d="M326 201c-4 6-9 10-13 11-12 32-34 59-59 59s-47-27-59-59c-4-1-9-5-13-11-6-9-6-20 0-24l2-1 5 19s5 10 7 18c-1-9-1-29 2-33 0 0 14-25 4-46 0 0 2-32 38-18 0 0 6 2 14 2l14-2c36-14 38 18 38 18-10 22 4 46 4 46 3 4 2 24 2 34 1-9 6-18 6-18 3-6 4-12 5-19l2 1c6 3 6 14 1 23z" />
<path style="fill:#324a5e" d="M330 103c-2-3-12 2-12 2 2-7-3-23-3-23-1 5-8 6-8 6 1-5-5-19-5-19 1 6-8 13-8 13 1-6-11-24-11-24 2 3 1 11 1 11-4-9-17-18-17-18 0 2-1 5-3 7-3-6-9-9-10-10-2 0-8 4-11 10l-3-7s-12 9-17 18c0 0-1-8 1-11 0 0-12 18-10 24 0 0-10-7-8-13 0 0-7 14-6 19 0 0-6-1-8-6 0 0-4 16-3 23 0 0-10-6-12-2 0 0 9 9 5 18 0 0-4 49 6 74 0 0 6 10 7 18-1-9-1-29 2-33 0 0 14-25 4-46 0 0 2-32 38-18l14 2 14-2c37-14 39 18 39 18-10 22 4 46 4 46 3 4 2 24 2 34 1-9 6-18 6-18 11-26 7-74 7-74-4-9 5-19 5-19z" />
</svg>
<div class="hidden text-xs font-medium xl:block">
<div>John Doe</div>
<div class="flex place-items-center space-x-1">
<a href="#" class="text-orange-800 hover:underline">1800</a>
<div>•</div>
<div class="animate-pulse text-green-800">ONLINE</div>
</div>
</div>
</div>
</div>
</div>
