Básicamente, tengo esta cuadrícula CSS personalizable por el usuario (nodo: ancho y alto no tienen límites, y no quiero que los tenga) y puede ser muy, muy ancho y/o muy, muy alto, y si eso sucede, el desplazamiento simplemente se detiene en algún lugar y los elementos que no están en el medio de la cuadrícula simplemente se vuelven inaccesibles.
Esto es lo que tengo en este momento y no tengo idea de cómo hacer que se desplace a 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> <!-- 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>PD: Antes de que alguien me vincule a esto , he tratado de entenderlo y no ha funcionado, por lo que pregunto más específicamente. (también eso también)
EDITAR: Gracias Teemu, tuve que agregar flex-wrap: wrap al conjunto de reglas del cuerpo