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 chessboard ends up overflowing the parent's height. In my actual code, the height of the header is unknown due to line wrapping. Footers have varying amounts of text. Inside the chessboard there are a series of divs representing rows and a series of divs representing each of the chessboard

P粉458913655 · Answer

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

Delete aspect ratio
In my example, remove the child wrapper element
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;
}

P粉034571623 · Answer

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;
}