CSS Flex布局忽略部分子元素尺寸 字幕被遮挡如何解决

问题现象 #

外层Flex容器#tea-containers下包含多个类名为tea的商品项，每个.tea设置为纵向Flex布局，内部放置商品图片和下方字幕标题。页面渲染时图片间距显示正常，但字幕被其他图片部分甚至完全遮挡，似乎Flex布局没有计算字幕的元素尺寸。

异常渲染效果：

问题根因 #

遮挡问题和Flex布局计算逻辑无关，是固定高度设置导致内容溢出：

• 每个.tea纵向Flex容器被设置了固定高度height: 245px
• 容器内的商品图片.tea-pic也被设置了height: 245px
• 纵向排列模式下，图片单独就占满了容器的全部可用高度，下方字幕没有剩余放置空间，直接溢出到容器边界外；外层Flex容器计算子项尺寸时只识别.tea设置的245px固定高度，不会把溢出的字幕高度纳入布局计算，最终溢出的字幕就被相邻商品项的图片遮挡。

修复方法 #

只需要调整高度设置即可解决问题：

1. 删除.tea选择器里的固定height: 245px属性，改为height: auto让容器高度自动适配内部所有内容（图片+字幕+边距）的总高度
2. 可选优化：把.tea的display: inline-flex改为display: flex，它本身是外层Flex容器的子项，不需要行内Flex特性；可以给外层#tea-containers加gap属性控制商品项间距，进一步避免内容贴太近产生遮挡。

修正后代码 #

CSS部分 #

.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;
  gap: 15px;
}

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

.tea-pic {
  height: 245px;
}

HTML部分（原有结构无需修改） #

<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>

调整后外层Flex容器会准确识别每个.tea项的完整高度（图片+字幕总高），字幕会正常显示在图片下方，不会再出现溢出遮挡的问题。

内容的提问来源于stack exchange，提问作者ongaston