Как сделать элемент в CSS Grid переполненным и не увеличивать всю сетку ⇐ CSS

[Anonymous]

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

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

button.addEventListener('click', () => {
content.classList.toggle('hidden');
});

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

@layer base, utils, components;

@import 'https://cdn.jsdelivr.net/npm/@webtui/css@0.1.6/dist/base.css';

/* Utils */
@import 'https://cdn.jsdelivr.net/npm/@webtui/css@0.1.6/dist/utils/box.css';

/* Components */
@import 'https://cdn.jsdelivr.net/npm/@webtui/css@0.1.6/dist/components/button.css';
@import 'https://cdn.jsdelivr.net/npm/@webtui/css@0.1.6/dist/components/typography.css';

/*
* those CSS variables are defaults,
* there are here for documentation purpose
*/
:root {
--background: var(--background1);
--color: var(--foreground1);
}
html, body, [box-] {
background: var(--background);
color: var(--color);

}
* {
font-size: 12px;
}
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"blog info"
"blog terminal"
"footer footer";
height: 100vh;
width: 100vw;
overflow-y: auto;
}
#blog {
grid-area: blog;
}
#info {
grid-area: info;
}
#info img {
margin-inline: 1ch;
margin-block: 1hl;
float: left;
}
#terminal-box {
grid-area: terminal;
display: flex;
flex-direction: column;
}
#term {
flex-grow: 1;
flex-shrink: 1;
}
#term >  div {
height: 100%;
}
#footer {
grid-area: footer;
text-align: center;
}
[box-] {
.header {
display: flex;
justify-content: space-between;
span {
background: var(--background);
padding: 0 1ch;
}
}
}
.hidden {
display: none;
}

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

section

toggle content



section


This is some text
This is some text
This is some text
This is some text




section


[list]
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[*]xxx
[/list]




Footer

Есть ли способ сделать так, чтобы сетка всегда имела размер 100vh и полоса прокрутки появлялась внутри переключаемого раздела? Но в то же время мне нужна фиксированная минимальная высота для переключаемого контента. Фрагмент стека допускает только 1 строку; Мне нужно, может быть, 10. Если они не подходят, я хочу, чтобы весь макет имел полосу прокрутки, и более 10 строк должны отображать полосу прокрутки на переключаемом контенте, но только если эти 10 не подходят, как в фрагменте стека. Я знаю, что это можно сделать с помощью JavaScript, но можно ли это сделать только с помощью CSS?
По сути, я хочу, чтобы при переключении содержимого я хотел, чтобы полоса прокрутки была в элементе сетки, и мне не нужны какие-либо жестко запрограммированные значения CSS, поэтому страница работает в любом размере.
В моем коде переключаемый раздел представляет собой интерактивный терминал, поэтому содержимое является динамическим.>

Подробнее здесь: https://stackoverflow.com/questions/798 ... -grid-grow