CSS Flex忽略某些子元素

Question

我对学习CS和Flex的知识很新，并且我的某些Flex容器遇到了一些困难。我将我的代码放在下面，但本质上是：Flex容器的子元素是Divs，每个元素包含一个带有下面字幕的图像。这些divs本身也是弹性元素。这些图像彼此之间的间距加载，但是字幕部分或完全被其他图像覆盖，好像它们的尺寸被忽略一样（即使它们是图像所属于的相同flex容器的一部分）。我觉得这可能有一个简单的解决方案，但我不能为自己的一生弄清楚。

这就是我所得到的所有这些：

.subtitle {
  font-family: Helvetica;
  color: seashell;
  font-weight: bold;
  font-size: 25px;
}

.tea-sub {
  margin-top: 10px;
  margin-bottom: 10px;
}

#tea-containers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-around;
  width: 80%;
  height: auto;
  margin: 30px auto;
}

.tea {
  display: inline-flex;
  flex-direction: column;
  height: 245px;
  min-width: 300px;
  justify-content: center;
  align-items: center;
}

.tea-pic {
  height: 245px;
}

<div id='tea-containers'>

  <div id='tea1' class='tea'>
    <img src='resources/images/img-berryblitz.jpg' alt='Fall Berry Blitz Tea' class='tea-pic'>
    <h4 class='subtitle tea-sub'>Fall Berry Blitz Tea</h4>
  </div>
  <div id='tea2' class='tea'>
    <img src='resources/images/img-spiced-rum.jpg' alt='Spiced rum tea' class='tea-pic'>
    <h4 class='subtitle tea-sub'>Spiced Rum Tea</h4>
  </div>
  <div id='tea3' class='tea'>
    <img src='resources/images/img-donut.jpg' alt='donuts' class='tea-pic'>
    <h4 class='subtitle tea-sub'>Seasonal Donuts</h4>
  </div>


  <div id='tea4' class='tea'>
    <img src='resources/images/img-myrtle-ave.jpg' alt='myrtle ave tea' class='tea-pic'>
    <h4 class='subtitle tea-sub'>Myrtle Ave Tea</h4>
  </div>
  <div id='tea5' class='tea'>
    <img src='resources/images/img-bedford-bizarre.jpg' alt='bedford bizarre tea' class='tea-pic'>
    <h4 class='subtitle tea-sub'>Bedford Bizarre Tea</h4>
  </div>

</div>

Answer 1

您的图像与它们所在的容器相同，因此它们填满了整个空间。这应该修复它：

.tea {
  height: 245px;
}

.tea-pic {
  height: 100%;
}