使用overflow-auto时Flex布局中卡片阴影被截断的解决方法

问题原因 #

当元素设置overflow-auto时，会裁剪掉自身内容框以外的视觉效果——包括Bootstrap shadow类生成的盒阴影，因为盒阴影默认绘制在元素边界之外，超出了overflow的裁剪范围。

可行解决方案 #

方案1：给带overflow的容器添加内边距 #

给包含卡片的父容器（即示例中的<main>）添加左右和底部内边距，为阴影留出显示空间，避免被overflow-auto裁剪。

修改后的<main>类：

<main class="d-flex flex-row flex-fill gap-3 overflow-auto px-4 pb-4">

完整代码示例：

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 px-4 pb-4">
    <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>

方案2：将阴影移到外层独立容器 #

给每个卡片套一层无overflow限制的外层容器，把shadow类移到外层容器上，让阴影不受卡片内部overflow-auto的影响。

修改后的卡片结构：

<div class="shadow rounded-4 flex-fill">
  <div class="card border-0 rounded-4 flex-fill mb-0">
    <div class="card-body d-flex flex-column gap-3 overflow-auto">
      <!-- 卡片内容 -->
    </div>
  </div>
</div>

完整代码示例：

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="shadow rounded-4 flex-fill">
      <div class="card border-0 rounded-4 flex-fill mb-0">
        <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>
    <div class="shadow rounded-4 flex-fill">
      <div class="card border-0 rounded-4 flex-fill mb-0">
        <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>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

内容的提问来源于stack exchange，提问作者Matthew Layton