Row will not grow to full width with flexbox and horizontal scrollbar

I'm building a table with flexbox, with the first cell being a header for the row. The other cells in the row are fixed-width.

I'd also like to have a header row with a background than spans the whole width.

Here's what it looks like :

and the corresponding code (using tailwind but it's really a CSS question) :

<div class="flex flex-col overflow-x-auto p-4"><div class="flex w-full bg-gray-300"><div class="min-w-40 grow">Header 1</div></div><div><div class="flex"><div class="min-w-40 grow">Row header 1</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div></div><div class="flex"><div class="min-w-40 grow">Row header 2</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div></div><div class="flex w-full bg-gray-300"><div class="min-w-40 grow">Header 2</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div></div><div class="flex"><div class="min-w-40 grow">Row header 3</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div><div class="w-12 flex-none">2.5</div></div></div></div>

Also in tailwind's playground.

When the screen size changes, the extra and removed space is absorbed by the first column, hence the grow class, up to a point, hence the min-w-40 class.

When the screen size gets too small, an horizontal scrollbar appears.

The problem is that the header row's background does no go all the way to the end of the row, it stops before the end.

How do I fix that ? And more importantly, I don't understand why so I'd love an explanation!