This is a very similar issue to my previous question. I learned a whole lot from that, but it doesn’t seem to work in this particular situation, of which I’ve created a simplified mock-up here:
<html>
<style>
*
{
box-sizing: border-box;
}
body
{
margin: 0px;
overflow: hidden;
}
.grid
{
display: grid;
grid-template-rows: 1fr;
border: solid 4px blue;
padding: 16px;
}
.fullscreen
{
position: absolute;
left: 0px;
top: 0px;
height: 100vh;
width: 100vw;
border: solid 4px red;
}
#textbox
{
padding: 4px;
width: 100px;
overflow-y: auto;
border: solid green 4px;
}
</style>
<div class="fullscreen grid">
<div class="grid" style="grid-template-rows: min-content 1fr; gap: 16px;">
<div style="border: solid green 4px; padding: 16px;"></div>
<div id=textbox></div>
</div>
</div>
<script>
let box = document.getElementById('textbox');
for(let i = 0; i < 100; i++)
box.innerHTML += 'Lorem Ipsum ';
</script>
</html>
The red div is intended to take up the whole screen – no more, no less.
The bottom green div is a scrollable text box. However, in this specific configuration, I can’t get it to stay within the grid layout and padding I’ve prescribed.
In you were to remove the intermediate blue div, or remove the upper green div, then the textbox behaves correctly, but of course that destroys the rest of the existing design. It also works if you specify a finite size for the grid row containing the textbox (such as 100px), but that too defeats the purpose, as I want it to occupy the whole vertical space.
Any idea what’s going on and how I might resolve this?