框阴影切断

Question

我有一个容器，列出了一些卡片（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;
}

每个卡片元素（带有 box-shadow 的元素）都包裹在一个 div 中，将其高度扩展为 16px

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

这似乎修复了被截断的 box-shadow，但 height: 450px 并不适用于所有浏览器，因为它看起来不一致。我试图找到一种解决方案，其中卡片容器（即滚动容器，下面的代码）的高度仅距底部 12 像素，这样就可以避免这种笨拙的解决方案。

我不太明白为什么底部的框阴影被切断了。

.grid {
  display: grid;
  grid-template-columns: repeat(2, 350px);
  grid-template-rows: min-content;
  gap: 1.75rem 3rem;
  margin-top: 1.5rem;
  width: 100%;
  
  padding: 16px;
  padding-bottom: 16px;
  margin: -10px;
  margin-top: 1rem;
  margin-bottom: -16px;
  height: 450px;
  overflow-y: scroll;
  
  outline: 1px solid red;
}

.card {
  padding: 1rem 1.25rem;
  outline: 1px solid blue;
  width: 350px;
  height: 245px;
  
  box-shadow:
    -5px -5px 10px 0px white,
    10px 10px 15px 0px black;
}

<div class="grid">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Answer 1

这是您查询的解决方案。

.grid-wrapper {
  overflow-y: scroll;
  height: 450px;
  overflow-x: hidden;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 350px);
  grid-template-rows: min-content;
  gap: 1.75rem 3rem;
  margin-top: 1.5rem;
  width: 100%;
  padding: 16px;
  padding-bottom: 16px;
  margin: -10px;
  margin-top: 1rem;
  margin-bottom: -16px;
  overflow: hidden;
  outline: 1px solid red;
}

.card {
  padding: 1rem 1.25rem;
  outline: 1px solid blue;
  width: 350px;
  height: 245px;
  box-shadow: -5px -5px 10px 0px white, 10px 10px 15px 0px black;
}

<div class="grid-wrapper">
  <div class="grid">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>