Why does text input not shrink
I have this code, why does the text input not shrink according to its parent, it causes an overflow
<div className="text-2xl font-bold capitalize md:block hidden">{currentSection}</div>
<div className="md:hidden"><Image src={Logo} alt="Logo" /></div>
<div className="md:flex min-w-0 justify-center hidden">
<input
type="text"
placeholder="Search"
className="h-10 px-4 rounded-l-[10px] bg-[#F3F3F3] flex-1 min-w-0"
ref={searchText}
onKeyDown={(e) => {
if (e.key === "Enter") {
search();
}
}}
/>
<button
onClick={search}
className="bg-[#F3F3F3] rounded-r-[10px] text-[#C2C2C2] px-2 py-2 w-fit"
>
<MagnifyingGlassIcon className="w-6 h-6 mx-auto" />
</button>
</div>
<div className="hidden md:block">
{isAuthenticated ? (
<button
onClick={logout}
className="bg-[#625CF9] rounded-[9px] text-white px-2 md:px-12 py-2 ml-auto block"
>
Logout
</button>
) : (
<Link
href="/login"
className="bg-[#625CF9] rounded-[9px] text-white px-2 md:px-12 py-2 ml-auto block"
>
Login
</Link>
)}
</div><div className="text-2xl font-bold capitalize md:block hidden">{currentSection}</div>
<div className="md:hidden"><Image src={Logo} alt="Logo" /></div>
<div className="md:flex min-w-0 justify-center hidden">
<input
type="text"
placeholder="Search"
className="h-10 px-4 rounded-l-[10px] bg-[#F3F3F3] flex-1 min-w-0"
ref={searchText}
onKeyDown={(e) => {
if (e.key === "Enter") {
search();
}
}}
/>
<button
onClick={search}
className="bg-[#F3F3F3] rounded-r-[10px] text-[#C2C2C2] px-2 py-2 w-fit"
>
<MagnifyingGlassIcon className="w-6 h-6 mx-auto" />
</button>
</div>
<div className="hidden md:block">
{isAuthenticated ? (
<button
onClick={logout}
className="bg-[#625CF9] rounded-[9px] text-white px-2 md:px-12 py-2 ml-auto block"
>
Logout
</button>
) : (
<Link
href="/login"
className="bg-[#625CF9] rounded-[9px] text-white px-2 md:px-12 py-2 ml-auto block"
>
Login
</Link>
)}
</div>
