Переполнение абсолютно позиционированного div из прокручиваемого относительного div ⇐ CSS

[Anonymous]

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

https://jsfiddle.net/yL9ugkvj/35 — это макет того, как это выглядит.

JS

Класс Columns расширяет React.Component { оказывать() { возвращаться ( этикетка подсказка
) } } ReactDOM.render(, document.querySelector("#app"))
CSS

body { фон: #20262E; отступ: 20 пикселей; семейство шрифтов: Helvetica; } #приложение { фон: #fff; радиус границы: 4 пикселя; отступ: 20 пикселей; переход: все 0,2 с; } div.flex { дисплей: сетка; столбцы-шаблона сетки: 50% 50%; } div.left::-webkit-полоса прокрутки { дисплей: нет; } div.left { дисплей: гибкий; гибкое направление: столбец; верх: 0; высота: 92вх; переполнение-y: прокрутка; -ms-overflow-стиль: нет; ширина полосы прокрутки: нет; оправдание-содержание: гибкий старт; z-индекс: 0; } div.right::-webkit-полоса прокрутки { дисплей: нет; } div.right { положение: относительное; дисплей: гибкий; гибкое направление: столбец; верх: 0; высота: 92вх; переполнение-y: прокрутка; переполнение-х: видимое; -ms-overflow-стиль: нет; ширина полосы прокрутки: нет; оправдание-содержание: гибкий старт; z-индекс: 1; } div.flex>div>div { граница: сплошная 2 пикселя #E0E0E0; цвет фона: #F5F4F2; радиус границы: 15 пикселей; поле: 10 пикселей; отступ: 10 пикселей 40 пикселей; минимальная ширина: 80%; } #header { дисплей: гибкий; положение: относительное; граница: нет; поле: 0 пикселей; отступ: 0 пикселей; переполнение: видимое; } div.tooltip { дисплей: нет; позиция: абсолютная; радиус границы: 12 пикселей; фон: #E8E6DE; box-shadow: 0px 4px 11,9px 8px rgba(0, 0, 0, 0,25); z-индекс: 3; отступ: 25 пикселей; ширина: 35мм; правильно: 100%; } p.label:hover>div.tooltip { размер шрифта: 16 пикселей; отображение: встроенный блок; отступ: 10 пикселей 25 пикселей; } Я пробовал несколько вещей, таких как z-index, ручная настройка ширины и т. д. Это работало до того, как я сделал каждый столбец независимо прокручиваемым (раньше, когда он не был относительно позиционирован), но при относительном позиционировании это ломалось.
р>