画布具有宽度和高度的奇怪行为

Question

所以我在使用Value时遇到了一些问题。它在100％高度和宽度时占用太多空间，当它仅设置在100％高度时，由于某种原因它仍然会导致和溢出。

实施例

宽度和高度均为100％时，画布会占用太多空间

＆＃13;

＆＃13;

<canvas>

＆＃13;

.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.upper {
  background-color: blue;
  height: 10%;
}

.lower {
  flex: 1;
  background-color: orange;
}

html, body {
  padding: 0;
  margin: 0;
}

canvas {
  height: 100%;
  width: 100%;
  background-color: red;
  padding: 0;
  margin: 0;
}

.inner {
  width: 100%;
  height: 100%;
  background-color: yellow;
  position: relative;
}

＆＃13;

＆＃13;

＆＃13;

这里，canvas设置为100％高度，但由于某种原因导致溢出。

＆＃13;

＆＃13;

<div class="flex">
  <div class="upper">
  </div>
  <div class="lower">
    <div class='inner'>
      <canvas></canvas>
    </div>
  </div>
</div>

＆＃13;

.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.upper {
  background-color: blue;
  height: 10%;
}

.lower {
  flex: 1;
  background-color: orange;
}

html, body {
  padding: 0;
  margin: 0;
}

canvas {
  height: 100%;
  background-color: red;
  padding: 0;
  margin: 0;
}

.inner {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

＆＃13;

＆＃13;

＆＃13;