Flex layout cuts off shadow when using overflow-hidden or overflow-auto

Consider the following markup which is using Bootstrap classes:

The layout consists of two cards placed left and right using flex-row.
The cards are fitted to the available vertical space using flex-fill.
Whilst The cards use the available vertical space, their content should scroll if it overflows the card. I have demonstrated large content using the .example-large-content class.
The cards have shadows.

html,
body {
  overscroll-behavior: none;
}

.example-large-content {
  min-height: 20rem;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column vh-100 bg-light p-5">
  <main class="d-flex flex-row flex-fill gap-3 overflow-auto">
    <div class="card border-0 rounded-4 flex-fill shadow">
      <div class="card-body d-flex flex-column gap-3 overflow-auto">
        <div class="example-large-content p-3 rounded-2 bg-danger">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-warning">
          Large content
        </div>
      </div>
    </div>
    <div class="card border-0 rounded-4 flex-fill shadow">
      <div class="card-body d-flex flex-column gap-3 overflow-auto">
        <div class="example-large-content p-3 rounded-2 bg-danger">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-warning">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-success">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-primary">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-info">
          Large content
        </div>
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

The problem has something to do with using overflow-auto and shadow together. The far-left, far-right, and bottom of the shadows is cut off, but they appear in the gap between the left and right cards:

Is there a way to solve this?

Solution

I gave main the p-5 class and removed it from the body. Now main can take the whole width of the body, which was causing the cutoff. body still can have the p-5 but then the cards are getting smaller.

html,
body {
  overscroll-behavior: none;
}

.example-large-content {
  min-height: 20rem;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column vh-100 bg-light">
  <main class="d-flex flex-row flex-fill gap-3 overflow-auto p-5">
    <div class="card border-0 rounded-4 flex-fill shadow">
      <div class="card-body d-flex flex-column gap-3 overflow-auto">
        <div class="example-large-content p-3 rounded-2 bg-danger">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-warning">
          Large content
        </div>
      </div>
    </div>
    <div class="card border-0 rounded-4 flex-fill shadow">
      <div class="card-body d-flex flex-column gap-3 overflow-auto">
        <div class="example-large-content p-3 rounded-2 bg-danger">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-warning">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-success">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-primary">
          Large content
        </div>
        <div class="example-large-content p-3 rounded-2 bg-info">
          Large content
        </div>
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>