I created an container in Html which holds multiple divs, but only 3 divs are visible and other divs are hidden in overflow which u can see by scrolling x axis (Overflow: auto).
I have given box-shadow to each child div, but the thing is the half of the shadow hides in parent div because Y axis overflow is hidden.

This is my code for HTML and CSS.

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

body{
  display: flex;
  width: 100%;
  justify-content: center;
}
.container{
  display: flex;
  width: 55%;
  overflow: auto;
}

.container div{
  flex: 0 0 calc(33.33% - 2em);
  width: 350px;
  height: 250px;
  margin: 1em 2em;
  background-color: red;
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

This is the output of this code. As you can see the shadow of bottom of each div hides in parent container.

I want shadow like this.

You can see the shadow at bottom is full and not hidden. But for that I need to remove every overflow which cause other divs visible.
Is there anything I can do to solve this? Increasing the bottom and top margin is also not fixing the issue.
Please Help!