HTML/CSS：子元素Box Shadow被父容器Overflow截断的解决求助

问题核心在于：当给父容器设置overflow: auto时，浏览器会同时裁剪X、Y两个方向的溢出内容，子元素的底部阴影超出父容器高度范围后就会被截断。而单独设置overflow-x: auto时，CSS规范会强制将overflow-y设为auto，依然会裁剪垂直方向的溢出。

下面提供两种可靠的解决方案：

方案一：双层容器结构（推荐） #

通过外层容器控制宽度，内层容器负责横向滚动，同时给内层容器添加上下padding来容纳阴影，避免被裁剪。

修改后的代码 #

HTML

<body>
  <div class="outer-container">
    <div class="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</body>

CSS

body {
  display: flex;
  width: 100%;
  justify-content: center;
}

.outer-container {
  width: 55%;
  /* 仅控制整体宽度，不设置overflow，避免裁剪阴影 */
}

.container {
  display: flex;
  width: 100%;
  overflow-x: auto;
  /* 仅开启横向滚动 */
  padding: 2em 0;
  /* 上下padding值大于阴影垂直范围，给阴影留出显示空间 */
  margin: -2em 0;
  /* 负margin抵消padding带来的额外空间，保持原布局高度 */
}

.container div {
  flex: 0 0 calc(33.33% - 2em);
  width: 350px;
  height: 250px;
  margin: 0 2em;
  /* 移除上下margin，避免与父容器padding叠加 */
  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);
}

方案说明 #

• 外层容器仅负责宽度控制，不限制overflow，让阴影可以正常显示在容器外部。
• 内层容器的上下padding为阴影提供了显示空间，负margin则保证整体布局高度和原代码一致，不会额外撑开页面。

方案二：使用filter: drop-shadow()替代box-shadow #

drop-shadow是CSS滤镜，基于元素的轮廓生成阴影，不会被父容器的overflow-x: auto裁剪（前提是父容器未设置overflow-y: hidden）。

修改后的CSS（仅子元素部分） #

.container div {
  flex: 0 0 calc(33.33% - 2em);
  width: 350px;
  height: 250px;
  margin: 1em 2em;
  background-color: red;
  /* 替换box-shadow为drop-shadow */
  filter: drop-shadow(0 25px 50px -12px rgb(0 0 0 / 0.25));
}

注意事项 #

• drop-shadow不支持阴影颜色变量（如原代码中的--tw-shadow-colored），如果需要彩色阴影需要直接写颜色值。
• 若元素有圆角，drop-shadow会跟随圆角，而box-shadow可以独立设置圆角，这点需要根据需求选择。

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