I have two items in a grid. The top one, which has text, I want to fit the content. So it's responsive when I change the page width. The bottom one I would like to take the remaining space, but don't grow so the grid becomes larger than the page height (100vh).
This is the code that I have:
button.addEventListener('click', () => {
content.classList.toggle('hidden');
});
@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;
}
<div class="layout">
<div box-="square" id="blog" shear-="top">
<div class="header">
<span>section</span>
</div>
<button id="button">toggle content</button>
</div>
<div box-="square" id="info" shear-="top">
<div class="header">
<span>section</span>
</div>
<section class="bio">
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</section>
</div>
<div box-="square" shear-="top">
<div class="header">
<span>section</span>
</div>
<div id="term">
<div id="content" class="hidden">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
</div>
</div>
<div box-="square" id="footer">
Footer
</div>
</div>
Is there a way to make the grid always 100vh and the scrollbar appear inside the toggleable section? But at the same time, I want some fixed minimum height for the toggable content. The stack snippet only allows 1 line; I want maybe 10. If they don't fit, I want the whole layout to have a scrollbar, and more than 10 lines should show the scrollbar on toggleable content, but only if those 10 don't fit, like in the stack snippet. I know that this can be done with JavaScript, but can this be done with CSS only?
Basically what I want is that when I toggle the content, I want the scrollbar on the grid item, and I don't want any hardcoded CSS values, so the page works on any size.
In my code, the toggleable section is an interactive terminal, so the content is dynamic.
![Why Gemini/Claude cant fix this web design? :/ [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded)