CSS Grid Ignores Max Height - css

Question

I have a complex layout grid for a nonogram app, which should be flexible for different sized grids. A nonogram looks like the following, and the inner grid is not guaranteed to be any particular size or column to row ratio. Also, the headers for the rows and columns will have an unknown number of elements
On smaller screens, my app looks fine and the grid scales down; but as you increase the size, once you hit the point that the height should be limited, the grid instead expands to use up all its available width while keeping its other proportions and blowing out the bottom.
GIF of what's happening: https://ibb.co/YfsT8nL
Some additional sketches of the issue:
I've tried and experimented with a ton of different ways to limit the layout, but nothing seems to have any effect. It seems that the elements containing the grid will size to the limitations I want, but then the #cell-container just blows up and then blows up the #grid-container and then blows out and overflows the #game-container.
The only thing I've done that seems to actually do anything is directly size the #cell-container, but this is not a solution because then the outer grid will not size things properly to keep the headers lined up and center the grid.
The behavior I expect is to have the row and column headers size to min-content, then the cells grid area should size the cells inside to be contained.
Code from my app (written with Svelte, TailwindCSS)
// NonoGame.svelte
<div id="game-container" class="flex flex-col px-2 h-screen">
<div id="game-header" class="flex flex-shrink-0 flex-grow-0 items-center justify-end text-3xl">
<GameTimer />
<PauseButton {controller} />
</div>
<div class="flex-shrink my-auto">
<div class="h-auto">
<NonoGrid controller={controller} />
</div>
</div>
<div id="game-footer" class="flex flex-shrink-0 flex-grow-0 justify-center items-center py-2">
<button class="invisible mr-auto ml-16">Submit</button>
<button id="mark-button" class="mx-2" on:click={() => controller.selectionMode = SelectionMode.Marking} class:active={controller.selectionMode === SelectionMode.Marking}><div></div></button>
<button id="cross-button" class="mx-2" on:click={() => controller.selectionMode = SelectionMode.Crossing} class:active={controller.selectionMode === SelectionMode.Crossing}></button>
<button on:click={submitSolution} class="ml-auto mr-16">Submit</button>
</div>
</div>
<style>
#game-header, #game-footer {
height: 10vh;
}
</style>
// NonoGrid.svelte
<div id="grid-container">
<div id="column-headings">
{#each $gridStore as column}
<span>
{#each GridHelper.getColGroups(column[0].x) as groupNum}
{groupNum}<br>
{/each}
</span>
{/each}
</div>
<div id="row-headings">
{#each $gridStore[0] as rowCell}
<div>
<span>
{#each GridHelper.getRowGroups(rowCell.y) as groupNum}
{groupNum}
{/each}
</span>
</div>
{/each}
</div>
<div id="cell-container"
on:mousedown={dragSelector.onMouseDown}
on:touchstart={dragSelector.onTouchStart}
>
{#each $gridStore as column}
<div class="grid-column">
{#each column as gridCell}
<NonoCell gridCell={gridCell} />
{/each}
</div>
{/each}
</div>
</div>
<style lang="postcss">
#grid-container {
display: grid;
grid-template-rows: fit-content(100px) 1fr;
grid-template-columns: fit-content(150px) 1fr;
grid-template-areas: "x col"
"row cells";
}
#column-headings, #row-headings {
#apply text-xl sm:text-3xl md:text-4xl;
}
#column-headings {
grid-area: col;
display: flex;
align-items: flex-end;
}
#column-headings > span {
width: 100%;
text-align: center;
}
#row-headings {
grid-area: row;
display: flex;
flex-direction: column-reverse;
}
#row-headings > div {
height: 100%;
vertical-align: middle;
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
}
#cell-container {
grid-area: cells;
display: flex;
flex-direction: row;
}
.grid-column {
display: flex;
flex-direction: column-reverse;
width: 100%;
}
</style>
If necessary, I can add some dynamic CSS styling with Svelte to respond to the size of the grid I'm rendering like so:
#cell-container {
grid-template-rows: var(--template-rows);
grid-template-columns: var(--template-columns);
}
But I really do NOT want to have Svelte be responsible for responding to screen size. That's what Grid and Flexbox are supposed to be for.
I tried restructuring my grid a little bit like so:
<div id="cell-container"
on:mousedown={dragSelector.onMouseDown}
on:touchstart={dragSelector.onTouchStart}
>
{#each $gridStore as column}
{#each column.reverse() as gridCell}
<NonoCell gridCell={gridCell} />
{/each}
{/each}
</div>
...
<style>
...
/* Static for 5x5 grid; can be dynamic with a css var if it worked in the first place */
#cell-container {
grid-area: cells;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(5, 1fr);
}
...
</style>
But this doesn't really help the situation much; in fact, there are even more odd behaviors happening when I scale this up and down.
I've created a CodePen with simplified code and a 5x5 grid for anyone to test with. Sorry if it's not perfectly neat and formatted; I did my best.
https://codepen.io/brooksvb/pen/eYReGRR
Thanks in advance for any assistance. I've been fighting this issue for over a week.
Bonus points: A feature I wanted to add, but will accept not having for this project for now, was to have a small gap appear between groups of 5 rows/columns, like the following picture. I already did some research into how to have a variable grid gap, but have found that Grid currently has no way to define anything besides a grid-wide gap value. If you have an idea of how to implement this in your solution, I'd love to see anything.

Answer 1

I wanted to leave the solution here that I used; I wrote some Javascript to do the calculation of cell size. G-Cyrillus' comment above also has a good idea of how to restructure the grid to handle it which I may revisit.
// NonoGrid.svelte
<script>
...
// DOM Elements
let gridSlot;
let columnHeadings;
let rowHeadings;
let gridColumns = [];
// This function calculates the size of cells based on screen space
const resizeCells = () => {
// Max height and width available
let maxHeight = gridSlot.clientHeight;
let maxWidth = gridSlot.clientWidth;
// Get height and width occupied by headers
let colHeaderHeight = columnHeadings.clientHeight;
let rowHeaderWidth = rowHeadings.clientWidth;
// Divide remaining space among rows and cols
let availableHeight = (maxHeight - colHeaderHeight) / controller.getRows();
let availableWidth = (maxWidth - rowHeaderWidth) / controller.getCols();
// Choose smallest for both dimensions to make square
let targetCellSize = (availableHeight < availableWidth ? availableHeight : availableWidth) + 'px';
// console.log(`Resizing to target: ${targetCellSize}`);
gridColumns.forEach((colElem) => {
colElem.style.width = targetCellSize;
});
}
onMount(() => resizeCells());
</script>
<svelte:window on:resize={resizeCells}></svelte:window>
<!-- Add grid slot to set max-height and contain the container, centered inside. Also add DOM bindings for above access -->
<div id="grid-slot" class="flex" bind:this={gridSlot}>
<div id="grid-container">
<div id="column-headings" bind:this={columnHeadings}>
...
</div>
<div id="row-headings" bind:this={rowHeadings}>
...
</div>
<div id="cell-container"
on:mousedown={dragSelector.onMouseDown}
on:touchstart={dragSelector.onTouchStart}
>
{#each $gridStore as column, i}
<div class="grid-column" bind:this={gridColumns[i]}>
{#each column as gridCell}
<NonoCell gridCell={gridCell} />
{/each}
</div>
{/each}
</div>
</div>
</div>
<style lang="postcss">
#grid-slot {
height: 80vh; // Set the height limit
}
#grid-container {
width: min-content; // Needed to scale down the column headers when columns shrink
margin: auto; // Centers horizontally and vertically (thanks to flex container)
...
}
...