Диаграмма выходит из контейнера ⇐ CSS

[Гость]

Если пользователь наводит курсор на раздел в основном разделе, открывается всплывающее окно, в котором важные данные отображаются в виде диаграммы. Эта диаграмма перемещается вместе с положением мыши. Теперь возможно, что диаграмма выходит за пределы основного раздела и накладывается на боковой.
[img]https:/ /i.stack.imgur.com/7POnP.png[/img]
Моя цель — установить минимальную позицию x, которую должно иметь всплывающее окно. Я уже пытался адаптировать расчет на основе JavaScript и установить стили CSS, но это не сработало, и я не знаю, как это решить.
Как я могу сообщить об этом всплывающему окну? что он может перемещаться только до конца своего основного контейнера?
Изменить: я использую Angular и добавил код html и scss.
< br />

Код: Выделить всё

public moveValueChart(event) {
let elementRect = (event.target as HTMLElement).getBoundingClientRect();
let x = event.clientX - event.target.clientWidth / 2 - elementRect.width;
this.valueChartPopup.nativeElement.style.transform = `translateX(${x}px)`;
}

Код: Выделить всё

 .padding-m {
padding: 8px;
}

.full-size {
width: 100%;
height: 100%;
}

.flex {
display: flex;
}

.card {
border: 1px solid #ecf5f5;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
border-radius: 8px;
background: white;
}

Код: Выделить всё

{{ row.code }}

Источник: https://stackoverflow.com/questions/781 ... -container