Изменение размера поля в HTML/CSS ⇐ Javascript

[Гость]

У меня есть следующие два поля со ссылками:

` [*] Пример Текста Не раскрывающийся текст [*]Текст раскрывающегося списка Еще текст! [*]Не раскрывающийся текст Пример Текста [*]Не раскрывающийся текст [*]Текст раскрывающегося списка Еще текст! [*]Не раскрывающийся текст .Tcontainer{ дисплей: гибкий; } .tilecontainer { отступ: 5 пикселей; } .коробка { цвет фона: #0051a5; отступ справа: 1em; отступ-верх: 1em; радиус границы: 1em; дисплей: сетка; строки-шаблона сетки: 1fr авто; столбцы-шаблона сетки: авто 1em; Grid-template-areas: «образец плюс» «экстратекст экстратекст»; } .плюс { область сетки: плюс; фон: линейный градиент (#0051a5 0 0), линейный градиент (#0051a5 0 0), #fff; фоновая позиция: центр; размер фона: 60% 2,5 пикселей, 2,5 пикселей 60%; фоновый повтор: без повтора; переход: легкость преобразования 0,3 с; } .знак { радиус границы: 50%; ширина: 1эм; высота: 1ем; поле справа: 1em; } .tilelabel { область сетки: образец; семейство шрифтов: «PT Sans Narrow», без засечек; размер шрифта: 1em; преобразование текста: верхний регистр; курсор: указатель; вес шрифта: 600; цвет: #fff; отступ слева: 1em; высота: 2ем; } .tileaccent { цвет: #FFC72C; } .скрытый-текст { область сетки: экстратекст; дисплей: нет; семейство шрифтов: «PT Sans Narrow», без засечек; размер шрифта: 0,75em; цвет фона: #fff; цвет: #000; маржа: 1em; отступ-верх: 0,5em; отступ слева: 1em; } .expanded>.скрытый-текст { дисплей: блок; анимация: постепенное появление 1 с; } @keyframes постепенное появление { от { непрозрачность: 0; } к { непрозрачность: 1; } } @keyframes постепенное исчезновение { от { непрозрачность: 1; } к { непрозрачность: 0; } } .hidden-text ul li ul { дисплей: нет; } .hidden-text ul li.active ul { дисплей: блок; } ли .plus { преобразование: поворот (0); } li.active .plus { преобразование: поворот (45 градусов); } /*заменяет курсор на указатель на элементы списка, у которых есть дочерний ul*/ .hidden-text ul li:has(ul) .plus { плавать: правильно } .hidden-text ul li:has(ul) { курсор: указатель; } document.querySelector('.tilelabel') .addEventListener('click', function() { const _parent = this.parentNode; _parent.classList.toggle('расширенный'); const plus = _parent.querySelector('.plus'); plus.style.transform = _parent.classList.contains('расширенный')? 'поворот (45 градусов)': 'поворот (0)'; }); const toggleChild = (e) => { если (e.currentTarget == e.target) { const el = e.target; el.classList.toggle("активный") } } const level2 = document.querySelectorAll(".hidden-text ul li:has(ul)"); level2.forEach((li) => li.addEventListener("click", toggleChild)) `

В настоящее время это дает результат:

введите здесь описание изображения

Однако я хотел бы изменить его размер, чтобы результат был следующим:

введите здесь описание изображения

Другими словами, оно должно заполнять всю ширину экрана. Я попробовал добавить атрибуты высоты, но функция раскрывающегося списка не работала

Как сделать так, чтобы высота была статичной, например, около 200 пикселей, но ширина заполнила ширину экрана, когда я добавляю больше полей в display: flex.

И еще одна небольшая проблема: почему не работает раскрывающийся список во втором окне? Есть ли способ изменить функцию JS, чтобы она соответствовала всем функциям блока без необходимости переименовывать классы... и т. д.?