Why does text input not shrink

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