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-contentclass. - 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?