Altering innerHTML is unwantedly affecting div dimensions

Question

So I was writing this basic tictactoe game, and in the process I've made a grid using a container (display:flex) and 9 elements with class of 'cell' inside them. Now I want to update the innerHTML of the div that gets clicked. But when I do so, the size of the div gets a little larger. I've seen other people ask this question before in here too, like this Div element moves when changing the innerHTML. They all suggest using vertical-align: top/bottom; to the main container.

I've tried doing this but that doesn't seem to work, in my case. When all the divs are filled up with text, the dimensions go back to normal again. SO it's definitely a problem with empty divs only. Any help?

function game(e) {
  const local = document.getElementById(`${e.id}`);
  local.innerHTML = 'X';
  console.log(e.id);
}

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 420px;
  height: 420px;
  display: flex;
  flex-wrap: wrap;
  background: pink;
  margin-top: 20px;
  margin-left: 20%;
  vertical-align: top;
}

.cell {
  flex: 1;
  margin: 6px;
  min-width: 30%;
  max-height: 30%;
  background: white;
}

<div id='container'>
  <div id='1' class='cell' onClick='game(this)'></div>
  <div id='2' class='cell' onClick='game(this)'></div>
  <div id='3' class='cell' onClick='game(this)'></div>
  <div id='4' class='cell' onClick='game(this)'></div>
  <div id='5' class='cell' onClick='game(this)'></div>
  <div id='6' class='cell' onClick='game(this)'></div>
  <div id='7' class='cell' onClick='game(this)'></div>
  <div id='8' class='cell' onClick='game(this)'></div>
  <div id='9' class='cell' onClick='game(this)'></div>
</div>

I also tried adding a wide space to all the elements just so that they aren't empty anymore.

for(let i=1; i<10;i++)
  document.getElementById(`${i}`).innerHTML=' ';

That didn't help either, and moreover I don't exactly prefer using this even if it would have worked. Looking for a seamless solution.

Note: I've been doing html and javascript for 2 months only, so not exactly superior with coding and/or syntax. Any criticism would be helpful.

Answer 1

Here you don't need your cells to change size, you want them to be 30% of the grid (in height and width) all the time.

Just use width and height instead of max-width and min-width.

And remove flex: 1;

function game(e) {
  const local = document.getElementById(`${e.id}`);
  local.innerHTML = 'X';
  console.log(e.id);
}

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 420px;
  height: 420px;
  display: flex;
  flex-wrap: wrap;
  background: pink;
  margin-top: 20px;
  margin-left: 20%;
  vertical-align: top;
}

.cell {
  margin: 6px;
  width: 30%;
  height: 30%;
  background: white;
}

<div id="container">
  <div id="1" class="cell" onClick="game(this)"></div>
  <div id="2" class="cell" onClick="game(this)"></div>
  <div id="3" class="cell" onClick="game(this)"></div>
  <div id="4" class="cell" onClick="game(this)"></div>
  <div id="5" class="cell" onClick="game(this)"></div>
  <div id="6" class="cell" onClick="game(this)"></div>
  <div id="7" class="cell" onClick="game(this)"></div>
  <div id="8" class="cell" onClick="game(this)"></div>
  <div id="9" class="cell" onClick="game(this)"></div>
</div>