title: React + Three.js canvas does not resize correctly when making the browser window smaller
body: <p>I am using react and three.js to display some 3D models in the browser. Everything works fine as long as the three.js component is the only element with visible content on the page. The three.js canvas will resize bigger and smaller just fine. You can wrap it in other containers and it still works fine. The issue starts when another element or component is added as a sibling.</p>
  
  <p>I want to have a viewport with a fixed width sidebar. I'm doing this with a flexbox row container, wrapped around a sidebar component (a simple div with min-width set), and the responsive three.js component.</p>
  
  <p>Resizing the window bigger works fine, the canvas fills the browser window appropriately. However, when resizing the window smaller, the canvas does not properly re-calculate it's size in relation to the available space left over by the static width sidebar, resulting in a canvas that does not fully fit in the browser and introducing scrollbars.</p>
  
  <p>The canvas does shrink some, but not enough to keep it fully in the browser window. The same issue occurs vertically if a component sits above or below the three.js component. If you recompile the app while the browser window is smaller, the refreshed view will have the canvas properly resized.</p>
  
  <p>Following the advice of many of the answers here on StackOverflow, the three.js react code looks  something like this:</p>
  
  <pre><code>export class Viewport extends React.Component {
  
    componentDidMount() {
  
      const width = this.mount.clientWidth;
      const height = this.mount.clientHeight;
      window.addEventListener("resize", this.handleWindowResize);
  
      // setup scene
      this.scene = new THREE.Scene();
  
      //setup camera
      this.camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );
      this.camera.position.set( 0, 5, 10 );
  
      // setup rendering
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setClearColor('#666666');
      this.renderer.setSize(width, height, false);
      this.mount.appendChild(this.renderer.domElement);
  
      // setup geo
      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material = new THREE.MeshBasicMaterial({ color: '#433F81' });
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);
      ...
  
    }
  
    componentWillUnmount() {
      window.removeEventListener("resize", this.handleWindowResize);
      this.mount.removeChild(this.renderer.domElement);
    }
  
    handleWindowResize = () =&gt; {
      const width = this.mount.clientWidth;
      const height = this.mount.clientHeight;
  
      this.camera.aspect = width / height;
      this.camera.updateProjectionMatrix();
  
      this.renderer.setSize(width, height, false);
    };
  
    render() {
      return (
        &lt;div className="viewport" style={{display: 'flex', width: "100%", height: "100%"}} ref={(mount) =&gt; { this.mount = mount }} /&gt;
      );
    }
  }
  </code></pre>
  
  <p>The styling is simple css flexbox, with the elements set to full width and height (100%), with the sidebar having a set min-width.</p>
  
  <pre><code>.flex-row-container {
    display: flex;
    flex-flow: row;
    height: 100%;
    width: 100%;
  }
  
  .sidebar {
    display: block;
    min-width: 250px;
    background-color: var(--color-mid-gray);
    margin: 3px 4px 3px 4px;
    box-sizing: border-box;
    border: 1px solid var(--color-mid-gray);
    outline: 3px solid var(--color-mid-gray);
  }
  </code></pre>
  
  <p>What am I missing?</p>