CSS: Как растянуть вложенный блок по ширине содержимого, но не шире страницы

Пытаюсь реализовать адаптивное поведение для вложенного блока (в примере - второго красного). Задача: блок должен растягиваться на всю ширину своего содержимого, но не превышать ширину родительской страницы. При этом содержимое блока может быть разным - от простого текста до сложных вложенных структур.

Стандартные подходы приводят к нежелательным эффектам:

• Flexbox (display: flex): блок растягивается, но при этом растягиваются и все родительские элементы выше по иерархии, что ломает верстку.
• Абсолютное позиционирование (position: absolute внутри relative): блок растягивается корректно, однако при большом объеме контента появляется горизонтальная прокрутка. Это приводит к визуальному "обрезанию" верхних элементов (например, шапки), так как контент выходит за пределы видимой области страницы.

Прошу помочь найти рабочее решение этой задачи. Визуальный пример проблемы и текущей верстки доступен по ссылке: https://codepen.io/weranda/pen/OPNxZwx?editors=1100