Los bordes de una cuadrícula CSS no se pueden desplazar.

Básicamente, tengo esta cuadrícula CSS personalizable por el usuario (nota: el ancho y alto no tienen límites, y no quiero que los tengan) y puede ser realmente ancha y/o realmente alta, y si eso sucede, el desplazamiento simplemente se detiene en alguna parte y los elementos que no están en el centro de la cuadrícula no se pueden acceder.

Esto es lo que tengo en este momento y no tengo ni idea de cómo hacer que se desplace por todas las partes de la cuadrícula.

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>
        <!--
        Hay muchas más casillas que se agregan mediante .appendChild().
        Imagina que hay unas miles de casillas más aquí.
        -->
    </div>
    <!-- Cosas irrelevantes de Buscaminas -->
    <button onclick="help()">¿Atascado?</button>
    <p id="minecount" style="display:inline;"></p>
</div>

PD: Antes de que alguien me vincule a esto, he intentado entenderlo y no ha funcionado, por eso estoy preguntando de forma más específica. (también eso también)

EDIT: Gracias a Teemu, tuve que agregar flex-wrap: wrap a las reglas del body.