Как получить текст, переполняющий x, в контейнере с прокруткой по y ⇐ CSS

[Гость]

У меня есть боковая панель, которую можно прокручивать, если высота области просмотра становится слишком низкой.
Нижняя запись всегда видна, поскольку она закреплена.
Когда вы нажимаете на нижний элемент, вы получаете контент, который иногда шире, чем панель навигации.
Этот контент должен выходить за пределы боковой панели, а боковая панель должна оставаться прокручиваемой, но, похоже, я могу выполнить только одно из требований.
Либо прокрутка теряется, если я устанавливаю видимость переполнения или переполненный текст обрезается.
Дерево HTML должно оставаться в таком виде, который имеет смысл для доступности и сохраняет функциональность (кнопка внизу видима, а вверху меню элементы, если область просмотра маленькая, боковая панель фиксированная и нижняя кнопка прикреплена).

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

/* scrollable sidebar */
.sidebar__nav {
overflow: auto;
}

.stickyBottom {
position: sticky;
z-index: 1;
}

.menuWithTextoverflow {
position: absolute;
width: max-content;
z-index: 3;
}

here's a codesandbox if it helps:
https://codesandbox.io/p/live/5db8cacb- ... b476b0322d


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