Place responsive blocks in flex columns

Question

I have a gaming website that has a header, board, and footer. I need all three to fit inside the viewport. The board should be smaller to achieve this.

Minification is the problem I'm having. I've been able to get the width responsive but not the restrictive height.

The board should remain square and occupy unused space or shrink to prevent overflow.

I'm doing something along the lines of below, but the board ends up overflowing the parent's height.

In my actual code, the height of the title is unknown due to line wrapping. Footers have varying amounts of text. Inside the chessboard there are a series of divs that represent the rows and a series of child elements that represent the squares of the chessboard. A square has an aspect ratio

.parent {
  height: 100vh;
  background-color: gray;
  display: flex;
  flex-direction: column;
}

.header {
  height: 10px;
  background-color: blue;
}

.child {
  background-color: red;
  flex: 1 1 auto;
}

.chessboard {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1/1;
  background-color: purple;
  margin: auto;
}

.footer {
  height: 10px;
  background-color: green;
}

<div class="parent">
  <div class="header">
  </div>
  <div class="child">
    <div class="chessboard">
    </div>
  </div>
  <div class="footer">
  </div>
</div>

Thanks for any help.

Answer 1

You have aspect-ratio telling the board to have the same height as the width, so if your width is 3000px, your height will be the same. You have a choice

1. Delete aspect ratio
2. In my example, remove the child wrapper element
3. Set the maximum height of the chessboard

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.header {
  flex-shrink: 0;
  height: 10px;
  background-color: blue;
}

.child {
  flex-grow: 1;
  background-color: lightcoral;
}

.chessboard {
  height: 100%;
  max-height: 100%;
  background-color: purple;
  margin: auto;
}

.footer {
  flex-shrink: 0;
  height: 10px;
  background-color: green;
}

<div class="parent">
  <header class="header">
  </header>

  <div class="child">
    <div class="chessboard">
      main
    </div>
  </div>

  <footer class="footer">
  </footer>
</div>

Answer 2

The final answer depends on some clarification on your part. I asked you in a comment on this question. But I will give a general answer.

I will briefly explain what is done in the example below.
I created a .chessboard-wrapper with a in it. Scale as needed, with aspect-ratio: 1;.
.chessboard itself has position:absolute; and will take the dimensions of the parent.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.header {
  height: 10px;
  background-color: blue;
  flex: none;
}

.child {
  background-color: red;
  flex: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chessboard-wrapper {
  position: relative;
  min-height: 0;
  margin: auto;
  aspect-ratio: 1;
}

.chessboard-wrapper > canvas {
  max-width: 100%;
  max-height: 100%;
}

.chessboard {
  position: absolute;
  inset: 0;
  background-color: purple;
}

.footer {
  height: 10px;
  background-color: green;
  flex: none;
}

<div class="parent">
  <div class="header"></div>
  <div class="child">
    <div class="chessboard-wrapper">
      <canvas width="1000000" height="1000000"></canvas>
      <div class="chessboard"></div>
    </div>
  </div>
  <div class="footer"></div>
</div>