Canvas not resizing based on sorounding div

[AoutoCooper]

Hi all,
I'm having this very frustrating problem, where my canvas is slightly larger than my screen size - both in height and width, and isn't responding when I wrap it in another div, and set it's width height attributes from there. The only way I seem to fix it, is through firefox's css inspection tools. This is my code -

I'm using react three xr as well -

<div style={{ position: "absolute", width: "100%", height: "100%" }}>
            <Canvas 
              camera={{ position: [0, 0, 0], fov: 75, near: 0.1, far: 1000 }}
            >
              <XR>
                <XRHitModel />
              </XR>
            </Canvas>
          </div>

Thanks