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
Leave feedback about this