我已经设法让它工作使用container-type .有漂亮的容器单位称为cqmin和cqmax. cqmin是最小的内联和块容器大小，这是方便时，纵横比变化。通过将正方形声明为容器，使用size值而不是inline-size，并将画布的宽度设置为100cqmin，它将填充网格项，这取决于较小的容器大小（因为size值同时考虑块和内联长度）。谢天谢地，容器查询似乎得到了普遍支持。

function portrait() {
  //I changed these from em to px so I could make sure the body and #page div sizes were as specified.
  document.body.style.width = "250px";
  document.body.style.height = "300px";
}

function landscape() {
  document.body.style.width = "300px";
  document.body.style.height = "250px";
}

document.getElementById("button0").addEventListener('click', portrait);
document.getElementById("button1").addEventListener('click', landscape);

portrait();

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

#page {
  height: 100%;
  border: 1ex solid blue;
  display:grid;
  grid-template-rows: 1fr auto;
}

.square {
  container-type: size; /* make it size and not inline-size so the units work for both inline and block dimensions */
}

canvas {
  border: 1ex solid red;
  display: block;
  width: 100cqmin; /* this is the secret sauce */
  aspect-ratio: 1/1;
}

.buttons {
  border: 1ex solid green;
  width: 100%;
}

<div id="page">
  <div class="square">
   <canvas width="100" height="100"></canvas>
  </div>
  <div class="buttons">
    <input id="button0" type="button" value="Works"/>
    <input id="button1" type="button" value="Works!!!!"/>
  </div>
</div>

尝试使用方向和@container规则！MDN Documentation

注意：如果要按真实的页面大小执行此操作，请将@container更改为@media

function portrait() {
  document.body.style.width = "10em";
  document.body.style.height = "14em";
}

function landscape() {
  document.body.style.width = "14em";
  document.body.style.height = "10em";
}

document.getElementById("button0").addEventListener('click', portrait);
document.getElementById("button1").addEventListener('click', landscape);

portrait();

html, body {
  margin: 0;
}
#page {
  height: 100%;
  box-sizing: border-box;
  border: 1ex solid blue;
  display: block;
  container-type: size;
}
#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}
.square {
  aspect-ratio: 1 / 1;
}
@container (orientation: landscape) {
.square {
  flex: 1;
  margin: auto;
  }
}

@container (orientation: portrait) {
.square {
   width: 100%;
  }
}
canvas {
  box-sizing: border-box;
  border: 1ex solid red;
  display: block;
  width: 100%;
  height: 100%;
}
.buttons {
  box-sizing: border-box;
  border: 1ex solid green;
  width: 100%;
}

<div id="page">
  <div id="wrapper">
    <div class="square">
      <canvas>
      </canvas>
    </div>
    <div class="buttons">
      <input id="button0" type="button" value="Works"/>
      <input id="button1" type="button" value="Fails"/>
    </div>
  </div>
</div>