Javascript 框阴影截断

我有一个容器，其中列出了一些卡片（div）。此容器是一个具有2列的网格元素 容器元素的CSS如下所示

  display: grid;
  grid-template-columns: repeat(2, 350px);
  grid-template-rows: min-content;
  gap: 1.75rem 3rem;
  margin-top: 1.5rem;
  width: 100%;

  // This is needed to display the box-shadows since overflow is set
  padding: 10px;
  margin: -10px;
  margin-top: 1rem;
  height: 450px;
  overflow-y: scroll;
}

每个卡片元素（带有方框阴影的元素）被包装在一个div中，该div将其高度扩展16像素

const Wrapper = styled(Box)`
  height: calc(100% + 16px);
`;

这似乎修复了被切断的框阴影，但是

高度：450px

并不适用于所有浏览器，因为它看起来不一致。我试图找到一个解决方案，其中卡片容器（滚动容器，代码如下）的高度从底部算起仅为12px，这样就可以避免这种棘手的解决方案

我不太明白为什么底部的盒子阴影被剪掉了

.grid{
显示：网格；
网格模板列：重复（2350px）；
网格模板行：最小内容；
差距：1.75雷姆3雷姆；
保证金上限：1.5雷姆；
宽度：100%；
填充：16px；
填充底部：16px；
利润率：-10px；
页边顶部：1rem；
边缘底部：-16px；
高度：450px；
溢出y：滚动；
轮廓：1px纯红；
}
.卡片{
填充：1雷姆1.25雷姆；
轮廓：1px纯蓝色；
宽度：350px；
高度：245px；
框阴影：
-5px-5px 10px 0px白色，
10px 10px 15px 0px黑色；
}

---

以下是您查询的解决方案

.grid包装器{
溢出y：滚动；
高度：450px；
溢出x：隐藏；
}
.电网{
显示：网格；
网格模板列：重复（2350px）；
网格模板行：最小内容；
差距：1.75雷姆3雷姆；
保证金上限：1.5雷姆；
宽度：100%；
填充：16px；
填充底部：16px；
利润率：-10px；
页边顶部：1rem；
边缘底部：-16px；
溢出：隐藏；
轮廓：1px纯红；
}
.卡片{
填充：1雷姆1.25雷姆；
轮廓：1px纯蓝色；
宽度：350px；
高度：245px；
盒影：-5px-5px 10px 0px白色，10px 10px 15px 0px黑色；
}

在卡片的父元素中添加填充将有助于您解决此问题。如果您注意到，父元素的填充底部已经是10px。尽管如此，它还是不起作用。有没有办法计算高度：450更具语义？如果高度是100%，并且溢出的内容是可滚动的，这实际上是个好主意。有什么想法吗？高度只是用来展示一个例子，你可以删除高度，使其100%它仍然会工作相同。