该元素的填充如何工作？

Question

我无法理解元素
padding-bottom: 100%中的.art-templates-image-container如何用于“正确”显示内容。

因此，基本上，尝试删除padding-bottom: 100%上的.art-templates-image-container并尝试查看元素：内容不可见。但是，当您再次添加填充时：内容现在可见！

任何人都可以解释它的工作原理吗？

.art-templates-container {
  display: flex;
}

.art-templates-item {
  flex-basis: 29%;
  overflow: hidden;
  margin: 10px;
  border: 1px solid #b8b8b8;
  padding: unset;
}

.art-templates-image-container {
  position: relative;
  /* min-height: 270px; */
  background-color: #fff;
  overflow: hidden;
  padding-bottom: 100%;
}

.art-templates-item-image {
  max-width: 190px;
  display: block;
  position: absolute;
  max-height: 150px;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

<div class="art-templates-container">
  <div class="art-templates-item">
    <div class="art-templates-image-container" style="background-color: rgb(255, 202, 222);"><img class="art-templates-item-image" src="https://d1xoshz9ol1c5p.cloudfront.net/images/development/generated-artworks/78edbb9c-7717-4a29-86d1-3a247b2573b9.png"></div>
    <div class="art-templates-item-info-div">
      <div class="art-templates-item-name">Artwork: 0313</div>
      <div class="art-templates-item-likes"><span class="art-templates-item-like-number"></span><span class="art-templates-item-heart unliked"></span></div>
    </div>
    <div class="art-templates-item-button-container">
      <div class="tzilla-green-button art-templates-item-button" data-tzilla-modal-trigger="modal-art-templates" data-template="2606">Add Template</div>
    </div>
  </div>
</div>