So sorgen Sie dafür, dass ein Element im CSS-Raster überläuft und nicht das gesamte Raster wächst ⇐ CSS

[Anonymous]

Ich habe zwei Elemente in einem Raster. Das oberste, das Text enthält, möchte ich zum Inhalt anpassen. Es reagiert also, wenn ich die Seitenbreite ändere. Das untere möchte ich den verbleibenden Platz einnehmen, aber nicht vergrößern, sodass das Raster größer als die Seitenhöhe (100 Vh) wird.
Das ist der Code, den ich habe:

Code: Select all

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

Code: Select all

@layer base, utils, components;

@import 'https://cdn.jsdelivr.net/npm/@webtui/[email protected]/dist/base.css';

/* Utils */
@import 'https://cdn.jsdelivr.net/npm/@webtui/[email protected]/dist/utils/box.css';

/* Components */
@import 'https://cdn.jsdelivr.net/npm/@webtui/[email protected]/dist/components/button.css';
@import 'https://cdn.jsdelivr.net/npm/@webtui/[email protected]/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;
}

Code: Select all

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

Gibt es eine Möglichkeit, das Raster immer auf 100 Vh einzustellen und die Bildlaufleiste innerhalb des umschaltbaren Abschnitts anzuzeigen? Gleichzeitig möchte ich aber eine feste Mindesthöhe für den umschaltbaren Inhalt. Das Stack-Snippet erlaubt nur 1 Zeile; Ich möchte vielleicht 10. Wenn sie nicht passen, möchte ich, dass das gesamte Layout eine Bildlaufleiste hat, und bei mehr als 10 Zeilen sollte die Bildlaufleiste bei umschaltbarem Inhalt angezeigt werden, aber nur, wenn diese 10 nicht passen, wie im Stapelausschnitt. Ich weiß, dass dies mit JavaScript möglich ist, aber kann dies auch nur mit CSS erfolgen?
Grundsätzlich möchte ich, dass ich beim Umschalten des Inhalts die Bildlaufleiste auf dem Rasterelement haben möchte und keine fest codierten CSS-Werte möchte, damit die Seite in jeder Größe funktioniert.
In meinem Code ist der umschaltbare Abschnitt ein interaktives Terminal, sodass der Inhalt dynamisch ist.