Having trouble scaling model on horizontal window resize

Questions
1

Full screen

image
image1919×744 12.6 KB

Vertically resizing it to make it smaller, looks how i want it to.

image
image1914×136 1.82 KB

horizontal resizing. The problem is that the model is not being fully shown

image
image453×504 2.4 KB

HTML:

      <div id="rocket-view-container">
        <script type="module" src="./main.js"></script>
      </div>

CSS:

  #rocket-view-container{
    width: 100%;
    height: 100%;
    display: block;
  }

JS

const handleWindowResize = () => {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  renderer.setSize(WIDTH, (HEIGHT/DIVIDEAMOUNT));
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  camera.aspect = WIDTH / (HEIGHT/DIVIDEAMOUNT);
  camera.updateProjectionMatrix();
};