Q:

How to prevent a dynamic table to grow over a defined height?

I am trying to represent a simple game board for an implementation of the "Flood it" game, which consists in a n by m matrix represented by a table, the content of the table is set dynamically using a javascript function.
I have written this bit of css : 
html, body {
    height: 100%;
}

table {
    border-style: solid;
    width: 30%;
}

td {
    position: relative;
    border-style: solid;
}

td:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

div#game_board_container {
    display: block;
    height: 50%;
    background-color: red;
}

div.cell_content {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;

}

Which serves to define the layout of some html that can be simplified to : 
<div id="game_board_container">
    <table id="game_board">
    <table>
</div>

Once update the table rows look like <tr><td><div class="cell_content"></div></td>....</tr> with m divs per row and n row per table.
The css works well with n by n and n by m matrix where n < m (more col than rows), I get a nice square or rectangular matrix, with square cells which size is limited by the width according to the css definition;
But when n > m the rows are stacking toward the bottom of the page;
I understand that it is caused by my use of the "responsive square design" to define my cells to be squares, and by the fact that my table dimensions is only defined by it's width, and unfortunately trying to define a height or a max-height for my table or wrapping it in a height defined container did nothing...
EDIT : I feel like I need to specify that I want the cells to shrink and the game board table to conserve its dimensions which here is 30% of the browsers page for height and width..
I have tried many options this afternoon, but none worked.
Since I am pretty new to css I am pretty sure that I a missing something, but I can't see what...

A:

Instead of using a table, which semantically should only be used for tabular data, you'd be much better of using divs and css grid. Using media queries you can adjust the numbers of boxes accordingly much much easier.

.board {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(4,50px);
  grid-gap: 10px;
}
.box {
  background-color: dodgerblue;
  color: white;
}
<div class="board">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
</div>

