Есть ли способ, чтобы размер текста заполнял весь div после изменения режима письма на боковой? ⇐ CSS

[Anonymous]

Я повернул текст в элементе div, используя режим письма:sideways-lr; но после этого я хочу, чтобы текст полностью заполнил div, а также масштабировался вверх/вниз в зависимости от того, как растягивается div. Я не знаком с JS, но, судя по тому, что немного искал, я и там не нашел решения.

HTML:

Киберфин Панель навигации Основная Боковая панель Содержимое1 Содержимое2 Содержимое3 Нижний колонтитул CSS: боковая панель содержит повернутый текст

:root { --main-радиус: 5 пикселей; --main-padding: 5 пикселей; } тело { семейство шрифтов: «Интер», без засечек; } .контейнер { дисплей: сетка; высота: 100вх; столбцы-шаблона сетки: 1fr 1fr 1fr 1fr; строки шаблона сетки: 0,2fr 1,5fr 1,2fr 0,8fr; области шаблонов сетки: "нав-нав-нав-нав" "главная боковая панель главная главная" "содержимое боковой панели1 содержимое2 содержимое3" "нижний колонтитул боковой панели нижний колонтитул"; зазор в сетке: 0,2бэр; вес шрифта: 800; преобразование текста: верхний регистр; размер шрифта: 12 пикселей; цвет: #242424; выравнивание текста: по центру; } навигация { фон: #f5f5f5; область сетки: навигация; граница-радиус: вар (--основной-радиус); отступ-верх: вар (--main-padding); } основной { фон: #f5f5f5; область сетки: основная; граница-радиус: вар (--основной-радиус); отступ-верх: вар (--main-padding); } #сайдбар { фон: #f5f5f5; область сетки: боковая панель; граница-радиус: вар (--основной-радиус); отступ-верх: вар (--main-padding); режим письма: вбок-lr; } #content1 { фон: #f5f5f5; область сетки: content1; граница-радиус: вар (--основной-радиус); отступ-верх: вар (--main-padding); } #content2 { фон: #f5f5f5; область сетки: content2; граница-радиус: вар (--основной-радиус); отступ-верх: вар (--main-padding); } #content3 { фон: #f5f5f5; область сетки: content3; граница-радиус: вар (--основной-радиус); отступ-верх: вар (--main-padding); } нижний колонтитул { фон: #f5f5f5; область сетки: нижний колонтитул; граница-радиус: вар (--основной-радиус); отступ-верх: вар (--main-padding); } а { выравнивание текста: по центру; дисплей: блок; семейство шрифтов: наследовать; текстовое оформление: нет; начертание шрифта: жирный; маржа: 1рем; } Я нашел способ увеличить текст, но он либо превышает размер элемента div при полном разрешении, либо начинает переполняться, когда я уменьшаю окно.

Я видел, что height: 100%;, width: 100%; и object-fit: Cover; может помочь, но это выглядит как будто это работает только с изображениями, а не с текстом?

Я просто хочу, чтобы он заполнял div независимо от размера. Грубые чертежи для примера/пояснения: Сырая нефть1 Сырая2