Why don't flex items shrink past content size?

The following input shrink with the browser window, but at some point they stop shrinking and the horizontal scroll bar appears. I feel this this is weird because they don’t have any width applied.

<div class="flex w-full flex-col items-start justify-start gap-2 md:flex-row">
  <div class="relative flex w-full flex-col items-start justify-start gap-2">
    <label class="text-sm font-semibold">Foreground Color</label>
    <div class="flex h-10 w-full items-center gap-2 rounded border border-black px-3 py-2">
      <div class="border-border h-6 w-6 cursor-pointer rounded border" style="background-color: rgb(255, 255, 255);"></div>
      <input type="text" class="bg-background flex-grow text-sm outline-none" maxlength="7" value="#ffffff" />
    </div>
  </div>
  <div class="relative flex w-full flex-col items-start justify-start gap-2">
    <label class="text-sm font-semibold">Background Color</label>
    <div class="flex h-10 w-full items-center gap-2 rounded border border-black px-3 py-2">
      <div class="border-border h-6 w-6 cursor-pointer rounded border" style="background-color: rgb(255, 255, 255);"></div>
      <input type="text" class="bg-background flex-grow text-sm outline-none" maxlength="7" value="#ffffff" />
    </div>
  </div>
  <div class="relative flex w-full flex-col items-start justify-start gap-2">
    <label class="text-sm font-semibold">Primary Color</label>
    <div class="flex h-10 w-full items-center gap-2 rounded border border-black px-3 py-2">
      <div class="border-border h-6 w-6 cursor-pointer rounded border" style="background-color: rgb(0, 0, 0);"></div>
      <input type="text" class="bg-background flex-grow text-sm outline-none" maxlength="7" value="#000000" />
    </div>
  </div>
  <div class="relative flex w-full flex-col items-start justify-start gap-2">
    <label class="text-sm font-semibold">Secondary Color</label>
    <div class="flex h-10 w-full items-center gap-2 rounded border border-black px-3 py-2">
      <div class="border-border h-6 w-6 cursor-pointer rounded border" style="background-color: rgb(0, 0, 0);"></div>
      <input type="text" class="bg-background flex-grow text-sm outline-none" maxlength="7" value="#000000" />
    </div>
  </div>
  <div class="relative flex w-full flex-col items-start justify-start gap-2">
    <label class="text-sm font-semibold">Border Color</label>
    <div class="flex h-10 w-full items-center gap-2 rounded border border-black px-3 py-2">
      <div class="border-border h-6 w-6 cursor-pointer rounded border" style="background-color: rgb(0, 0, 0);"></div>
      <input type="text" class="bg-background flex-grow text-sm outline-none" maxlength="7" value="#000000" />
    </div>
  </div>
</div>

https://play.tailwindcss.com/jznfwsVPof

Why this is and how to fix it?

You need to sign in to view this answers

Related Post