I am currently working on creating a 3D viewer using three.js. My goal is to have the viewer take up the full height of the screen while also leaving space for a side panel. The vertical layout is functioning properly, but once I add the render's dom element, a horizontal scroll bar mysteriously appears.
Below is a sample code that showcases this issue. Ideally, I would only want to see the black canvas element and the red body. However, after v.append(renderer.domElement) is executed, the page expands (filling with blue, the html element) and a horizontal scroll bar becomes visible. It appears that the page extends beyond the body.
You can view the example here: https://jsfiddle.net/5jnvt4jh.
Does anyone have any insights or suggestions on what might be causing this issue? I have checked for margins and paddings in Chrome and Firefox, but haven't found a solution. Thank you!
Minimal Working Example (MWE)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
html {
background-color: blue;
}
body {
margin: 0px;
height: 100vh;
background-color: red;
}
#viewer {
height: 100%;
width: 80vw;
background-color: green;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
</head>
<body>
<div id="viewer"></div>
<script>
var v = document.getElementById('viewer');
var renderer = new THREE.WebGLRenderer();
v.append(renderer.domElement);
renderer.setSize(v.clientWidth, v.clientHeight);
</script>
</body>
</html>