I got a strange problem with bounding box. As you can see on screenshot - the position of the bounding box of ad_agency is 1-2 pixels to the right of the position of the real element. I have no odd margins, paddings and etc, all are regular. Little strip(4px in height) below Ad_agency token/chip is positioned from it .getBoundingClientRect() and its width equal to the width of token. Looks like visual width of chips is less than its bounding box width and it move all past elements out of bounding box (somehow). If i set const width (for example width: 150px;) - problem disappear, but any other options for width gives this bug.

I using typescript, mobx, react, css.

const Container = styled(CFlex)<{color: string}>`
    height: 28px;
    background-color: ${props => props.color};
    border-radius: 2px;
    display: inline-flex;
    color: white;
    margin-right: 12px;
    align-items: center;
    position: relative;
    z-index: 20;
    &:hover {
      z-index: 23;
}`

don't know if it matters, i use react clone to insert token and add to it mouse events:

{React.cloneElement(this.props.children, {
                onMouseLeave: this.referenceMouseHandler,
                onMouseEnter: (event) => this.referenceMouseHandler(event, true),
            })}

where this.props.children = token

Do anyone know how to solve this problem?

Minimum version where problem occurs(looks like content positioning wrong): enter image description here