title: HTML div height keeps growing on window resize event
body: <p>I have simple three.js scene (canvas) which I want to respond upon window resize event (particularly change in the width of the screen, keeping height constant). 
  In normal situation i use <code>window.innerWidth</code>, <code>window.innerHeight</code> property to set the size of canvas to match the window size.</p>
  
  <p>However I want to embed three scene in the html. 
  So I have put three canvas in <code>&lt;div id="three-container"&gt;</code>.</p>
  
  <p>In following code when I resize the window (even width only) the height of the canvas keeps growing. Where is the bug? What am I missing?</p>
  
  <p>To get the size of div container I have tried <code>container.clientWidth</code>, <code>container.offsetWidth</code> and <code>$('#three-container').width()</code> (and height respectively), but for all cases the initial height of div is 0 and keeps growing on resize.  </p>
  
  <p>Full code listing:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;default&lt;/title&gt;
          &lt;link rel="icon" href=""&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id='three-container' class= "row"&gt;&lt;/div&gt;
  
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"&gt;&lt;/script&gt;
          &lt;script&gt;
  
              var renderer, scene, camera, cube;
              var time = 0.0;
              var container = window.document.getElementById( 'three-container' );
              var w = 100; //container.clientWidth; // container.offsetWidth
              var h = 100; //container.clientHeight; //  container.offsetHeight
  
              init();
              loop();
  
              function init() {
  
                  camera = new THREE.PerspectiveCamera( 45, w / h, 1, 1000 );
  
                  scene = new THREE.Scene();
                  scene.add( camera );
  
                  camera.position.z  = 16;
  
                  renderer = new THREE.WebGLRenderer();
                  renderer.setClearColor( 0xa696969 );
                  renderer.setPixelRatio( window.devicePixelRatio );
                  renderer.setSize( w, h );
  
                  container.appendChild( renderer.domElement );
  
                  var geo = new THREE.BoxGeometry( 5, 5, 5);
                  var mat = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true } );
                  cube = new THREE.BoxHelper( new THREE.Mesh( geo, mat ), mat.color );
                  scene.add( cube );
  
                  window.addEventListener( 'resize', function onWindowResize() {
                      w = container.clientWidth; // container.offsetWidth
                      h = container.clientHeight; // container.offsetHeight
  
                      console.log( " w : " + w + " h : " + h);
                      renderer.setSize( w, h );
                      camera.aspect = w / h;
                      camera.updateProjectionMatrix();
                  }, false );
              }
  
              function loop() {
                  time += 0.01;
                  requestAnimationFrame( loop );
                  cube.rotation.x = time ;
                  cube.rotation.y = time ;
                  renderer.render( scene, camera );
              }
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>