Make Table Cells (Not 3x3, 2x4!) Square?

Question

I'm trying to make some response square table cells. I'm aware of the answers to this question, but they all seem to be for a 3x3 grid, I can't find an 2x4 versions. I also don't want it to have to be scrolled, it needs to fit within the menu. It should always be square, if it cannot fit the height, have it be scaled down. I'd like it to be centered horizontally and vertically. How would I go about doing this? Here's the site in question. The Site. You can see how the grid on the right side does fit the height, and width, but isn't square. How can I fix this?

.menu{
  background: #222222;
  position: absolute;
  top: 50%;
  /*left: 50%;*/
}
.menu.right{
  width: 25%;
  height: 70%;
  /*transform: translate(-50%, -50%);*/
  top: 5%;
  right: 0;
  float: right;
  /*display: grid;
  grid-gap: 5px;
  */
  /*grid-template-columns: auto auto;*/
  /*grid-template-rows: auto auto auto auto;
  grid-template-columns: repeat(2, 50%);
  */
  /*grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  padding: 5px;*/
  display: flex;
  flex-direction: column;
}
#statwrap{
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  padding: 5px;
}
#stattab{
  width: 100%;
  height: 100%;
  flex: 1;
  border-spacing: 10px 10px;
}
#statbody{

}
.statcell{
  background: #333333;
  border-radius: 15px;
  width: 50%;
}

<div class="menu right">
  <!--
  <div class="stat one"></div>
  <div class="stat two"></div>
  <div class="stat three"></div>
  <div class="stat four"></div>
  <div class="stat five"></div>
  <div class="stat six"></div>
  <div class="stat seven"></div>
  <div class="stat eight"></div>
  -->
  <div id="statwrap">
    <table id="stattab">
      <tbody id="statbody">
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
      </tbody>
    </table>
</div>
</div>

Thanks.

Answer 1

const adjustSquare = () => {
    let squareWidth = document.querySelector('.menu.right').offsetHeight / 4;
    document.getElementById('stattab').style.maxWidth = (squareWidth * 2) + 'px';
}

document.onreadystatechange = () => {
    if (document.readyState == 'interactive') {
        adjustSquare()
    }
}

window.onresize = adjustSquare

.menu {
    background: #222222;
    position: absolute;
    top: 50%;
}
.menu.right {
    width: 25%;
    height: 70%;
    top: 5%;
    right: 0;
    float: right;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    justify-content: center;
}
#statwrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    padding: 5px;
    justify-content: center;
    align-items: center;
}
#stattab {
    width: 100%;
    height: 100%;
    flex: 1;
    border-spacing: 10px 10px;
}
.statcell {
    background: #333333;
    border-radius: 15px;
    width: 50%;
    position: relative;
}
.statcell .square {
    padding-top: 100%;
}
.statcell .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    color: #ffffff;
}

<div class="menu right">
  <div id="statwrap">
    <table id="stattab">
      <tbody id="statbody">
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

Inside a cell , you can use a floatting pseudo with a vertical padding of 100% . it will take td's width as reference and will stretch it to be at least a square.

A table cell will grow anyway to match the heigth of content if it goes beyond your initial square

.menu.right {
  width: 25%;
  height: 70%; 
  max-width:40vmin;
  max-height:90vmin;
  min-width:0;
  float: right; 
  display: flex;
  flex-direction: column;
  border:solid;
}

#statwrap {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  padding: 5px;
}

#stattab {
  width: 100%;
  height: 100%;
  flex: 1;
  border-spacing: 10px 10px;
}

#statbody {}

.statcell {
  background: #333333;
  border-radius: 15px;
  width: 50%;
}

.statcell::before {
  content: '';
  float: left;
  padding-top: 100%;
}

<div class="menu right">
  <!--
  <div class="stat one"></div>
  <div class="stat two"></div>
  <div class="stat three"></div>
  <div class="stat four"></div>
  <div class="stat five"></div>
  <div class="stat six"></div>
  <div class="stat seven"></div>
  <div class="stat eight"></div>
  -->
  <div id="statwrap">
    <table id="stattab">
      <tbody id="statbody">
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>