центр абсолютного div в переполнении родителя - css

Question

У меня есть проблема, которую я постараюсь описать как можно лучше: у меня есть абсолютный div, который невидим.У меня есть значок, который при наведении, абсолютный div виден.Теперь я хочу центрировать абсолютный делитель в соответствии с иконкой.

Проблема в том, чтобы центрировать абсолютный делитель на значке, мне нужно, чтобы свойство позиции значка было position: relative.Это проблема, потому что значок находится в элементе div, который имеет overflow: hidden, таким образом, абсолютный div обрезается.

Если я помещу абсолютный div вне div переполнения, я не смогу центрироватьсяdiv к иконке.

Вот снимок экрана, описывающий проблему: https://i.gyazo.com/2f7144c856bd484cedc7975438fa3e9b.png

Div выглядит следующим образом, когда не обрезан: https://i.gyazo.com/32ac127fa8c163907a0564fb57ec549e.png

Вот код для разметки для этого (я пропустил нерелевантные части):

<BreakdownIconWrapper
  onMouseEnter={this.toggleBreakdownDisplay}
  onMouseLeave={this.toggleBreakdownDisplay}
>
  <img src={PercentsIcon} alt="Breakdown" />
  <Breakdown
     bottom="37px"
     left="-120px"
     right="-119px"
     visible={showBreakdown}
     breakdown={box.breakdown}
   />
</BreakdownIconWrapper>

Вот css:

const BreakdownIconWrapper = styled.span`
  position: relative;
  margin-left: 11px;
`;

const Breakdown = styled.div`
  position: relative;
  width: max-content;
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
  padding: 10px 7px;
  background: #f3f8fb;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  opacity: ${(props) => props.visible ? '1' : '0'};
  pointer-events: auto;
  cursor: default !important;
  transition: 0.3s;
  box-shadow: 0 1px 9px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;

  &:after {
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    margin: auto;
    content: '';
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f3f8fb;
  }
`;

Компонент Breakdown - это абсолютный div и BreakdownIconWrapperэто div, содержащий значок img.

Все это в div, у которого скрыто переполнение.Как сделать так, чтобы компонент «Разбивка» игнорировал переполнение и оставался по центру значка?