Tailwind CSS Overflow flex items

Question

I am trying to render cards above a map(map z-index is -1). The cards are in a flex container. I want to show overflow scroll on x-axis but cards grow beyond the screen width.

My Code is below

1. Map Container (in Map.js )

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;

2. Card

<div className="border box-border m-0 ring-gray-500 bg-yellow-100 rounded border-gray-400 h-36 w-64 p-2"></div>

3. App.js

<section className="p-1">
      <div className="absolute top-1 flex flex-row flex-grow-0 overflow-auto justify-items-start align-middle gap-1 ">
        <Card />
        <Card />
        <Card />
          ...
      </div>
    <Map/>
</section>

Answer 1

I think I fixed my problem. thanks to @Seif Alaa for the idea.

1. I fixed the size of main container section with w-screen
2. In cards container div i inherited the size with w-full
3. Stopped the cards from shrinking with shrink-0 on card