TailwindCSS fixed width property not working on resolution change-CodePudding

I have this div that's supposed to represent a button next to an input. Ideally on resolution change, the input element's width shrinks but the button stays the same height and width.

<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
   <AddIcon></AddIcon>
   <div className="flex font-sans text-base font-medium">Add site</div>
</div>

I set the w-28 property thinking it could achieve this. However, the button changes width if I shrink the window or screen it appears on, and I'm not sure why.

This is the full component:

<div id="settings" className="w-3/4 h-5/6 bg-blue-300 self-center">
      <div id="settings-content" className="flex flex-col self-center mx-5">
        <div id="header" className="flex flex-col mt-5">
          <div id="title" className="font-sans font-bold text-3xl">Block Sites</div>
        </div>
        <div id="subtitle" className="font-sans text-base font-medium text-neutral-600">Visiting these sites will stop point acquisition until you reset the timer</div>
        <div id="block-site-add-list" className="flex flex-row mt-16 justify-between bg-amber-400 shrink-0">
          <div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
            <AddIcon></AddIcon>
            <div className="flex font-sans text-base font-medium">Add site</div>
          </div>
          <input className="ml-5 flex-grow bg-red-500"></input>
        </div>
      </div>
    </div>

This is what the button looks like with a smaller screen, when both words should be on the same line:

CodePudding user response：

You could try adding whitespace-nowrap to your label div to ensure that the text doesn't wrap to two lines. Since you have your elements (button and input) wrapped in another flex, you can add shrink-0 to your wrapper div to keep its size.

For example:

<div id="block-site-add-list" className="flex flex-row ...">
  <div className="shrink-0 flex flex-row ...">
    <AddIcon></AddIcon>
    <div className="whitespace-nowrap font-sans text-base font-medium">Add site</div>
  </div>
  <input className="ml-5 grow bg-red-500"></input>
</div>