Как растянуть вложенный блок внутри других блоков на максимальную длину, но не более чем на ширину страницы?

Question

[weranda]

Приветствую.

Кручу, верчу... Не очень пойму джедайский подход к вытягиванию нужного вложенного блока на всю ширину его содержимого, но не более чем на ширину страницы. Внутри второго красного блока может быть содержимое от текста до вложенных блоков.

Задаю блоку display: flex — он растягивается, но и растягиваются и блоки выше.
С position absolute внутри relative растягивается, но если контента много, то появляется скролл и header как бы обрезается - контент в блоке выходит за пределы страницы...

Подскажите, пожалуйста, решение.
Пример визуальный прилагаю: https://codepen.io/weranda/pen/OPNxZwx?editors=1100

Comments

[Ankhena]

Скрин, кажется, противоречит описанию, поэтому так:
Помогут сочетания из этих 4 свойств: overflow, justify-self, max-width, box-sizing в зависимости от желаемого результата.

[weranda]

Ankhena,
По вашей рекомендации получается...
overflow = 11 вариантов.
justify-self = 19 вариантов.
max-width = 11 вариантов.
box-sizing = 7 вариантов.
блоков html = 10.
... получаются тысячи вариантов....

[Ankhena]

weranda, у части из них значения очевидные.
box-sizing - можете, конечно, перебирать все, включая очень полезные тут unset, inherit или revert.
justify-self - два варианта - оставить как есть или прибить к левому краю.
Макс ширина - ну тоже особо не разбежаться. Вам же надо, чтобы блок не вываливался из ячейки грида, а значит, вариант с 100%, наверное поможет.
С overflow: ну откуда же я знаю, что вы хотите сделать с тем, что не поместилось, обрезать или скроллить. Я не настолько телепат. Выберите самостоятельно или скорректируйте вопрос.

блоков html = 10.

Ну да, ну да и все проблемные.
Я бы работала с правыми мелкими. Кажется, они у вас называются .content, если правильно запомнила.