I can’t figure out how to set the width of a parent container, whose child divs scroll horizontally. If I set a fixed, e.g. 1400px width it works, but not when I try to use the remainder of the screen using Flex boxes. Thanks!

Code:

<div class="h-screen">
  <div class="flex flex-1 overflow-hidden h-full">
    <div class="flex h-full w-32 bg-gray-100 p-4">Sidebar</div>
    <div class="flex flex-1 flex-row">
      <div class="flex-1 overflow-x-auto bg-blue-300 p-4">
        <div class="flex flex-row gap-4 min-w-full">
          <div class="h-96 w-96 bg-gray-500"></div>
          <div class="h-96 w-96 bg-gray-500"></div>
          <div class="h-96 w-96 bg-gray-500"></div>
          <div class="h-96 w-96 bg-gray-500"></div>
        </div>
      </div>
    </div>
  </div>
</div>