Flexbox子元素因内部图片溢出父容器问题求助

我将.team设为固定高度的垂直方向Flex容器，希望内部的<span>占据自身所需高度，.team-info占据剩余高度。但给.team-info设置height:100%后，容器仍会溢出，移除内部图片后问题消失，需要保留图片并实现预期布局。

相关代码：

body {
    background-color: rgb(28,38,60);
    font-family: 'Ubuntu', sans-serif;
}

* {
    box-sizing: border-box;
}

.team {
    display: inline-flex;
    padding: 10px;
    background: rgb(0 0 0 / 60%);
    border-radius: 20px;
    height: 130px;
    flex-direction: column;
    color: lightgray;
}

.team-info {
    display: inline-flex;
    height: 100%;
}

.team-compo {
    margin-right: 20px;
    padding-bottom: 10px;
    height: 100%;
}

.team-member {
    display: inline-block;
    font-size: 0;
    position: relative;
    margin: 0 5px;
    height: 100%;
}

.team-member > img {
    border-radius: 25px;
    height: 100%;
}

.team-member::after {
    content: "";
    height: 100%;
    width: 100%;
    border: 1px solid rgb(211 211 211 / 30%);
    display: block;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: -1;
    border-radius: 25px;
}

<div class="team">
  <span class="rota-name">Some text</span>
  <div class="team-info">
    <div class="team-compo">
      <div class="team-member">
        <img src="https://cdn-icons-png.flaticon.com/256/1626/1626319.png" alt="">
      </div>    
    </div>
  </div>
</div>

在flex-direction: column的Flex容器中，子元素的height:100%是基于容器的总高度计算，而非容器扣除其他子元素后的剩余可用高度。当.team设置固定高度时，.team-info的height:100%会让它的高度等于.team的总高度，再加上上方<span>的高度，整体就超出了.team的固定高度，导致溢出。内部图片只是让这个溢出问题可视化——无图片时，.team-info虽高度为100%但无内容，视觉上看不出溢出；添加图片后，图片继承父元素的100%高度，直接撑出了溢出效果。

1. 修正.team-info的高度控制方式：
   移除.team-info的height:100%，改为设置flex: 1。在垂直Flex布局中，flex:1会让子元素自动填充容器中除其他子元素（即<span>）之外的剩余空间，完美实现<span>占自身高度、.team-info占剩余高度的需求。

2. 调整内部元素适配：
   由于.team-info现在填充剩余空间，内部的.team-compo、.team-member设置的height:100%会自动基于.team-info的高度计算，无需额外修改。若.team-compo的padding-bottom导致视觉上的底部溢出，可确保.team-info开启box-sizing: border-box（已全局设置），或调整padding值。

3. 优化伪元素布局（可选）：
   .team-member::after的top:8px会让伪元素在视觉上超出.team-member的范围，可给.team-member添加overflow: hidden，或调整伪元素的尺寸为calc(100% - 8px)并配合top:4px，避免视觉上的溢出。

修改后的关键CSS代码：

.team-info {
    display: inline-flex;
    /* 移除height:100%，添加flex:1 */
    flex: 1;
}

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