Прокрутка Overflow-x с видимым переполнением-y, вызывающая скрытый контент в div с абсолютным позиционированием ⇐ Javascript

[Гость]

Примечание. Это не повторяющийся вопрос; Я проверил все связанные вопросы в stackoverflow.

У меня есть div с overflow-x: прокрутка, и я хочу, чтобы overflow-y был видимым. Внутри этого div у меня есть еще один div с позицией, установленной на absolute. Однако я столкнулся с проблемой, когда содержимое внутри div с абсолютным позиционированием скрывается при переполнении в направлении y.

Вот упрощенная версия моей структуры HTML и CSS, созданная с помощью Reactjs:

.zooming-bar { ширина: 100%; отступ: 2px 0; фон: hsl(0, 0%, 40%); положение: относительное; курсор: двигаться; дисплей: гибкий; высота: 100 пикселей; переполнение-х: прокрутка; переполнение-y: видимое; } .прокручиваемая полоса { ширина: 100%; курсор: указатель; маржа: 0 авто; положение: относительное; верх: 30 пикселей; дисплей: гибкий; гибкое направление: столбец; высота: 25 пикселей; поле слева: 0; } .buttons-блок { положение: относительное; верх: 50 пикселей; } .buttons-group { высота: 30 пикселей; } .flex-wrap { flex-wrap: обертка; } .sub-сегмент-обертка { поле слева: 0; верх: -55 пикселей; } .segment-обертка { поле слева: 2 пикселя; поле справа: 2 пикселя; поле сверху: 2 пикселя; дисплей: гибкий; ширина: 100%; высота: подходящее содержание; позиция: абсолютная; } .button-segment { цвет: #000; выравнивание текста: по центру; семейство шрифтов: "Poppins Regular"; размер шрифта: 14 пикселей; стиль шрифта: нормальный; вес шрифта: 400; цвет фона: #ff7e64; высота: 20 пикселей; ширина: 100%; поле справа: 2 пикселя; положение: относительное; граница: 2 пикселя, сплошная прозрачная; высота строки: 15 пикселей; } .button-card-task-description { высота: 25 пикселей; отступ сверху: 10 пикселей; } .button-info-card { позиция: абсолютная; фон: #ffffff; внизу: 35 пикселей; z-индекс: 5; ширина: 85%; радиус границы: 5 пикселей; правильно: 0; фильтр: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.25)); левая граница: 12 пикселей, сплошная #f2f2f2; отступ: 5 пикселей; } .button-info-card:после { содержание: ""; позиция: абсолютная; левая граница: 10 пикселей, сплошная прозрачная; правая граница: 10 пикселей сплошная прозрачная; верх: 100%; border-top: 12 пикселей сплошной #ffffff; маржа-верх: 0; справа: 25 пикселей; } .button-label-inside { z-индекс: 2; положение: относительное; отступ: 0 5 пикселей; } .content-pane { дисплей: гибкий; гибкое направление: строка; оправдание-содержание: пространство между; фон: hsl(240° 19,32% 67,79%); высота: 52 пикселей; выровнять-элементы: по центру; } .content-pane > div { поле: 3 пикселя; Пример кода Содержимое1 Содержимое2 Содержимое3 Содержимое4 Содержимое5 Содержимое1 Содержимое2 Содержимое3 Содержимое4 Содержимое5 Lorem ipsum dolor сидеть amet consectetur adipisicing elit. Tempora, nihil eaque? Sequi ab, magni ducimus qui corporis натус репеллендус. Его услуги архитектора были особенно полезны. Этот ненавидит любую гибкость? Ярлык кнопки Сама компания очень успешная. Раз, и ничего? Вслед за ним великий лидер тела рожден, чтобы быть отвергнутым Его услуги архитектора были особенно полезны. Этот ненавидит любую гибкость? Ярлык кнопки Сама компания очень успешная. Раз, и ничего? Вслед за ним великий лидер тела рожден, чтобы быть отвергнутым Его услуги архитектора были особенно полезны. Этот ненавидит любую гибкость? Ярлык кнопки Сама компания очень успешная. Раз, и ничего? Вслед за ним великий лидер тела рожден, чтобы быть отвергнутым Его услуги архитектора были особенно полезны. Этот ненавидит любую гибкость? Ярлык кнопки

Я хочу, чтобы содержимое внутри .zooming-bar было видимым. Однако контент скрыт.

Как добиться желаемого поведения: overflow-x при прокрутке, сохраняя при этом overflow-y видимым, позволяя содержимое внутри .zooming- bar должен быть полностью виден в направлении y?
Последнее примечание. Я хочу, чтобы эта скрытая часть всплывающего окна отображалась поверх вышеуказанного содержимого, и я не хочу добавлять дополнительные отступы или поля к соответствующим элементам div.< /п>