How to keep the div 100% of the parent container when scaling the div?

I am trying to build a canvas like element using div.

I have a div element that is acting as a canvas, this div element can zoom and pan. This div.canvas element is placed inside a container. I achieve the zooming and panning effects using css transforms scale and translate.

example
(the black is the container, the green is the div.canvas and inner red square is inner element)

Every time, I zoom out the div(acting as canvas) width and height is also scaled down and not is not 100% to the container.

here’s a codesandbox that can replicate the problem. (use +, – keys for zooming)

// import "./styles.css";

let scale = 1;

window.addEventListener("keydown", (e) => {
  if (e.key === "+") {
    scale += 0.2;
  } else if (e.key === "-") {
    scale -= 0.2;
  }
  // console.log("scale: ", scale);
  document.getElementById("canvas").style.transform = `scale(${scale})`;
});

body {
  font-family: sans-serif;
  height: 100vh;
  width: 100%;
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  background-color: brown;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
}

.element {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <div class="canvas" id="canvas">
        <div class="element"></div>
      </div>
    </div>

    <!-- <script src="./index.mjs" type="module"></script> -->
  </body>
</html>

You’ll notice every time you scale down pressing - key, the div.canvas becomes smaller as well.

how can I ensure everytime I zoom, it affects only the contents inside the div.canvas instead of the div itself or how can I make sure that the div.canvas is always 100% of the parent container?