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>

15 Replies

ἔρως•3mo ago

the default width of inputs is 300px you have to explicitly set it to 100% or, use a proper css reset, which usually solve this type of weird edge cases

b1mind•3mo ago

you can also set the inputs to min-width: 0; if you don't want them to grow

ἔρως•3mo ago

the code has min-w-0, which i assume it is the tailwind way of doing that

b1mind•3mo ago

I mean that should work 🤷‍♂️

ἔρως•3mo ago

the parent also has min-w-0

b1mind•3mo ago

yea just saw that gah I hate reading tailwind

ἔρως•3mo ago

same

b1mind•3mo ago

even worse in that plain code syntax 😂

ἔρως•3mo ago

the pretty colors help a lot

b1mind•3mo ago

Either way a reply is always best heheh I will give TW that you don't need to look at two different spots to "kinda" know whats going on. But nothing beats just having devtools and knowing how things work hah and that is where TW gets worse for me too hah but yea idk I just testing min-width and it works fine in normal css/html so makes me think there is something else going on wait nvm 🤔 not alone has to be a flex or grid child 🤔

ἔρως•3mo ago

it is a flex or grid child for md sized devices <div className="md:flex <-- the first class

b1mind•3mo ago

I mean yea and width: 100% would work if it wasnt https://codepen.io/b1mind/pen/XWvNjyJ

ἔρως•3mo ago

the problem is when it shrinks so, when it isn't in flex, it is overflowing, at some point

SneaXOP•3mo ago

cool, thank you guys sorry for the weird ass code im just trying to hack something together 😭

ἔρως•3mo ago

it's lot your fault all tailwind code looks like shit, so, don't worry

Gaming

Programming

Why does text input not shrink