I have a row flex-wrap element with a gray background.

• When the screen can accomodate all the items in a single row the row only takes as much width as is needed by its children

• When the smaller screen size causes the row to wrap, it continues to take extra space around its children as demonstrated by the gray showing up around the children

How can I get it to shrink so it doesn't show take up this empty space.

Current code

<div class="flex flex-col h-100 items-center justify-center bg-black"><div class="inline-flex shrink flex-wrap justify-center gap-2 bg-gray-600"><div class="h-20 w-52 bg-white"></div><div class="h-20 w-52 bg-white"></div><div class="h-20 w-52 bg-white"></div></div></div>

Code in Playground: https://play.tailwindcss.com/16OSgVOqBc