Flex layout clips shadow when overflow-hidden or overflow-auto is applied

Exploring the given markup with Bootstrap classes:

  • The layout showcases two cards aligned left and right using flex-row.
  • These cards are adjusted to fit the available vertical space using flex-fill.
  • Although the cards occupy the vertical space, their content should scroll if it extends beyond the card. A demonstration of this is shown using the .example-large-content class.
  • The cards have a shadow effect applied.

html,
body {
  overscroll-behavior: none;
}

.example-large-content {
  min-height: 20rem;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3b32e1ca617c617c">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d56255a6f7c616c">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</body>

An issue arises when using overflow-auto and shadow together. The shadows on the far-left, far-right, and bottom sides appear cut off, yet they are visible in the gap between the left and right cards:

https://i.sstatic.net/82nWrlGT.png

Is there a solution to this problem?

cssflexboxbootstrap-5

Answer №1

I updated the styling of main by adding the p-5 class and removing it from the body. This change allows main to now occupy the entire width of the body, eliminating the cutoff issue. The body can still have the p-5 class, but this results in smaller cards within.

html,
body {
  overscroll-behavior: none;
}

.example-large-content {
  min-height: 20rem;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c19021f021f">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f223f22">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on registering/loading a CSS style file in a WordPress child theme

I have a problem with the code I'm using as it's not updating the appearance of the login page... function custom_login_stylesheet() { wp_register_style('custom-login', get_template_directory_uri().'/css/login-style.css' ...

phpcsswordpress

How do I disable scrolling while the animation is running in CSS?

Is there a way to disable scrolling while animating in CSS without using overflow:hidden on the body tag? ...

htmlcss

A HTML table featuring a stationary header, a scrollbar for horizontal navigation, and columns that adjust in

For the past week, I've been attempting to create an HTML table with a fixed header, dynamic column widths, and horizontal scroll. I've come across several options, but each seems to be lacking in some way. I would greatly appreciate any assista ...

javascripthtmlcsshtml-table

Tips for filling in the empty space next to an image with a negative left margin using text

Our goal is to create a layout where an image overflows from its container, leaving space for text to fill in the gap created by the offset image on the left side. https://i.sstatic.net/2dvLa.jpg Currently, our structure looks like this: <div class=" ...

csstwitter-bootstraplayoutbootstrap-4

issue arising from unique style identifiers in FireFox while making changes to styles via document.styleSheets

While experimenting with altering some stylesheets using JavaScript, I encountered an interesting issue: When attempting to set an attribute on a style rule in Firefox and the property is one of their proprietary ones, it fails silently. To demonstrate th ...

javascriptcssfirefox

Issue with Ajax calendar extender not displaying full calendar due to being cut off

I've implemented the Ajax calendar extender with my own custom CSS classes. The styles are being applied correctly, but I'm encountering an issue. When the calendar at the bottom of the page opens, it gets cut off at the bottom due to the restric ...

asp.netcssajaxcontroltoolkit

Executing conditions in a JavaScript browser

Currently, I am utilizing a JS library known as fallback.js. This library loads all its <link> elements at the bottom of the <head> tag. However, I am facing an issue where I need to load certain stylesheets at the very end, but they require IE ...

javascriptjquerycssfallback

Create a moving background gradient with styled-components

Currently, I am working on setting the background of the <Paper /> component using Material-UI version 1.0.0-beta.25 to display a gradient of colors. The colors are dynamically added by clicking the Add button and selecting one from the color picker. ...

cssreactjsanimationmaterial-uistyled-components

Pictures in the portfolio failing to load on Mozilla Firefox

Having some trouble with my WordPress website bmfconstruction.com.au/new/. In the project section, all images are loading correctly in Chrome, Opera, and IE. However, when it comes to Firefox, none of the images seem to be showing up. I've tested this ...

javascriptcsswordpressimagefirefox

Adjust the color of the icon depending on the value

I am new to Angular2 and I'm looking for a way to dynamically change the CSS of an icon based on specific values. Here is the code in HTML: <li><i class="fa fa-check" [style.color]="'switch(types)'"></i>{{ types }}</l ...

htmlcssangulartypescriptng-class

Attempting to customize the appearance of a submit button independently from other input elements

Hey there, I have a question that might sound silly, but bear with me as I'm still learning CSS. I've been experimenting with CakePHP and its form helper to create a form. Here's a snippet of the code I'm working with: <p><?ph ...

phphtmlcsscakephp

What is the code to incorporate a color using PHP?

Question: Is there a way to indicate approval with green color and decline with red color? I've searched for a solution but couldn't find one. PHP Code: <?php if(isset($_POST['approve'])) { $msg = "Approved"; ...

phphtmlcssdatabase

Bootstrap alert JS refuses to slide down

Here is the JavaScript code to make a blue bar slide down on click: $('#comment').click(function(e) { e.preventDefault(); $('#comment').slideDown(); }); ...

javascriptjqueryhtmlcsstwitter-bootstrap

Trouble with Bootstrap 3: Footer refusing to stay at bottom of page

At work, I was given the task to create a mini-webpage layout using bootstrap. I decided to use an existing layout called Amoeba as my base. You can view the preview here. Everything was working almost perfectly on the localhost, except for the footer. If ...

csstwitter-bootstrapfooterfluid-layout

It appears that the font in style.css is not being updated properly and seems to resemble

My issue lies within my CSS code. The text on my website is not displaying correctly and seems to be ignoring the styling that I have applied. Even though I have used similar styling on other buttons which look fine, this specific text element is causing p ...

javascripthtmlcssstyles

Image is overlaid by Dropdown Menu

Today I had a strange encounter on my website LiveGreen Whenever I hover over the Menu Services, the dropdown menu goes under the image section below it. I've tried every possible solution like adjusting positioning and z-index, and searched extensiv ...

htmlcss

Ways to allow scroll events on top of an overlay without passing click events

My goal is to develop a unique map annotation tool with custom controls, not relying on the built-in features of map providers. Imagine something like this: https://i.sstatic.net/70Yj7.gif I had the idea of placing a canvas over the map for this purpose ...

javascripthtmlcsscanvashtml5-canvas

Creating personalized styles for my React components with the help of styled-components

Exploring the power of styled-components for custom styling on child components has been an interesting journey for me. For instance, I recently crafted a unique card component named myCard. Take a look at how it's structured: import React from "rea ...

cssreactjsmaterial-uistyled-components

The background property does not support linear-gradient in CSS

I am currently working on creating a tree structure using the vue-orgchart library (link) Everything is functioning correctly, but I am interested in changing the green background color of the node (ignoring the white portion). https://i.sstatic.net/EEcd ...

javascripthtmlcssvuejs2

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

I'm currently working on an Angular4 application that features a carousel displaying products, their names, and prices. At the moment, there are 6 products organized into two rows of 3 each. The carousel includes buttons to navigate left or right to d ...

javascripthtmlcssangularbootstrap-4