абсолютное позиционирование тега, переполняющего его контейнер

Question

пожалуйста, у меня проблема с тем, чтобы тег с абсолютным позиционированием оставался внутри его родительского элемента, я попытался сделать высоту родительского элемента такой же, как и общую высоту дочернего элемента, с которым он работал, но лучше ли это, как я могу это решить? Я добавил фрагмент результата ниже

.team__members {
  width: 80%;
  display: flex;
  border: 2px solid #000;
}

.item__member {
  width: 24%;
}

.img {
  width: 100%;
  height: 100px;
  background-color: #000;
}

.item__member-info {
  position: relative;
}

.team__member-name {
  position: absolute;
}

a {
  position: absolute;
  display: block;
  text-decoration: none;
  color: #fff;
  background-color: #000;
}

<div class="team__members">
  <div class="team__member">
    <div class="img"></div>
    <div class="team__member-info">
      <div class="team_member-name">
        <h3>Katherine Wong</h3>
        <p>Facial & breast surgery</p>
      </div>
      <a href="#">view full profile</a>
    </div>
  </div>
</div>

&__member{
    width: 24%;

    img{
        width:100%;
    }
    &-info{
       position: relative;

        a{
        position: absolute;
        display: block;
        }
    }
    &-name{
        position: absolute;
        h3{

        }
        p{

        }
    }

}