Basically, I have this user-customisable CSS-grid (node: width and height don't have limits, and I do not want it to have such) and it can be really really wide and/or really really high, and if that happens, the scrolling just stops somewhere and the elements not in the middle of the grid just get made inaccessible.
This is what I have at the moment and I got zero idea how to make it scroll to all parts of the grid
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0px;
}
#board {
display: grid;
grid-template-columns: 26px
}
.tile {
width: 20px;
height: 20px;
border-style: solid;
border-color: rgb(64, 64, 64);
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center
}<div id="game_div">
<div id="board">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<!--
There are a lot more tiles that get added via .appendChild().
Imagine like a few thousand more tiles here.
-->
</div>
<!-- Irrelevant Minesweeper stuff -->
<button onclick="help()">Stuck?</button>
<p id="minecount" style="display:inline"></p>
</div>PS: Before anyone links me to this, I have tried to understand it and it hasn't worked, so I am asking more specifically. (also that as well)
EDIT: Thank you Teemu, I had to add flex-wrap: wrap to the body ruleset