内容溢出和滚动造成圆角问题

Question

我正在尝试创建卡片布局。这是我的样式代码，在 div 中使用。

.card-container-grid-2 {
  padding: 1rem;
  gap: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3), 1fr));
  grid-auto-rows: 12rem;
  width: 100%;
  height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  background: #f2f2f2;
  border-radius: 0.5rem;
}

卡片渲染得很好。但容器有溢出，并且左下角和右下角的圆角破裂。尝试控制滚动溢出，但滚动条不可滚动并且圆角仍然尖锐。我怎样才能解决这个问题？有什么建议吗？