Here you go. Wrapping the element with an aspect-ratio in a flex container was key to getting it to apply the ratio. You also have to be aware that the default flexbox alignment is "stretch" which will override the size you specify, so you need to opt out of that by using `justify-content: center` (main axis) or `align-items: center` (cross axis) (start or end alignment will also work if that's where you want it. The inner rectangle doesn't require this because it has the bottom green rectangle to flex and take up the extra space.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
box-sizing: border-box;
}

html, body {
height: 100%;
}

body {
background: #999;
display: flex;
flex-direction: column;
align-items: center;
}

.tall-rectangle {
height: 100%;
aspect-ratio: 0.66;
display: flex;
flex-direction: column;
background: red;
}

.square {
background: black;
width: 100%;
aspect-ratio: 1;
display: flex;
flex-wrap: wrap;
}

.inner-rectangle {
background: green;
flex: 1;
}

.tile {
width: 12.5%;
height: 12.5%;
}

.tile.odd-row { background: black; }
.tile.odd-row.tile:nth-of-type(2n) { background: white; }

.tile.even-row { background: white; }
.tile.even-row.tile:nth-of-type(2n) { background: black; }

</style>
</head>
<body>
<div class="tall-rectangle">
<div class="square">
<div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
<div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
<div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
<div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
<div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
<div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
<div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
<div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
<div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
<div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
<div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
<div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
<div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
<div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div><div class="tile odd-row"></div>
<div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
<div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div><div class="tile even-row"></div>
</div>
<div class="inner-rectangle"></div>
</div>
</body>
</html>

For CSS grid, you can use the same HTML with the following styles:

<style type="text/css">
* {
box-sizing: border-box;
}

html, body {
height: 100%;
}

body {
background: #999;
display: grid;
grid-template-rows: 100%;
justify-content: center;
}

.tall-rectangle {
background: red;
height: 100%;
aspect-ratio: 0.66;
display: grid;
grid-auto-rows: auto 1fr;
}

.square {
background: black;
width: 100%;
aspect-ratio: 1;
display: grid;
grid-template-rows: repeat(8, 1fr);
grid-template-columns: repeat(8, 1fr);
}

.inner-rectangle {
background: green;
flex: 1;
}

.tile.odd-row { background: black; }
.tile.odd-row.tile:nth-of-type(2n) { background: white; }

.tile.even-row { background: white; }
.tile.even-row.tile:nth-of-type(2n) { background: black; }

</style>