center absolute div in overflow parent - css

问题

I have a problem which I'll try to describe as best I can: I have an absolute div which is invisible. I have an icon which when hovered, the absolute div is visible. Now, I want to center the absolute div according to the icon.

The problem is in order to the center the absolute div to the icon, I need the icon's position property to be position: relative. This is a problem because the icon is in a div which has overflow: hidden, thus, the absolute div gets cropped.

If I put the absolute div outside the overflow div, I won't be able to center the div to the icon.

Here is a screen shot the describes the problem: https://i.gyazo.com/2f7144c856bd484cedc7975438fa3e9b.png

The div looks like this when it is not cropped: https://i.gyazo.com/32ac127fa8c163907a0564fb57ec549e.png

Here is the code for the markup for this(I omitted irrelevant parts):

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

Here is the 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;
  }
`;

The Breakdown component is the absolute div and the BreakdownIconWrapper is a div containing the img icon.

All of this is in a div which have overflow hidden. How can I make the Breakdown component ignore the overflow and still be centered to the icon?

来源：https://stackoverflow.com/questions/50717902/center-absolute-div-in-overflow-parent-css