防止内容垂直扩展网格项

Question

我不希望我的网格项目的内容能够扩展它。我可以通过设置网格min-width: 0来防止出现这种情况。对min-height: 0进行了相同的尝试，但似乎不起作用。

.productGallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 10px;
}
.productGallery:before {
  grid-area: 1 / 1 / 1 / 1;
  content: '';
  width: 0;
  padding-bottom: 100%;
}
.featuredImage {
  grid-area: 1 / 1 / 5 / 5;
  background-color: green;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.galleryList {
  grid-area: 1 / 5 / 5 / 5;
  background-color: red;
}

<div class="productGallery">
  <div class="featuredImage">
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaa
  </div>
  <div class="galleryList">

  </div>
</div>

提前感谢！

Answer 1

删除.productGallery:before样式。这就是导致底部多余空间的原因。