title: How to scale a canvas from within a list item?
body: <p>I created a 3D model with Zdog which resizes based on the size of the screen.  This works as expected:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const TAU = Zdog.TAU;
  
  let hat = new Zdog.Illustration({
    element: '.zdog-canvas', // set canvas with selector
    dragRotate: true,
    rotate: {x: TAU/4, z: TAU/-6},
      translate: {y: 20},
    zoom: 4,
      onResize: function( width ){
                this.zoom = width / 300;
            }
  });
  
  
  var dome = new Zdog.Hemisphere({
    addTo: hat,
    diameter: 80,
    stroke: 20,
    color: 'blue',
    fill: true,
  });
  
  var brim = new Zdog.Ellipse({
    addTo: dome,
    width: 95,
    height: 73,
    quarters: 2,
    stroke: 20,
    translate: {y: 34},
    rotate: {z: TAU/4},
    fill: true,
    color: 'blue'
  });
  
  function animate() {
    hat.rotate.z += 0.03;
    hat.updateRenderGraph();
    // animate next frame
    requestAnimationFrame( animate );
  }
  
  animate();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      margin: 0;
  }
  
  .myDiv{
      height: 100%;
      min-height: 100%;
      margin: 0;
  }
  
  .zdog-canvas {
    display: block;
    position: absolute;
    height: 100%;
    background: #FDB;
    cursor: move;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"&gt;&lt;/script&gt;
  
  &lt;html&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;div class='myDiv'&gt;
                  &lt;canvas class="zdog-canvas" width="800" height="500"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>However, if I place this 3d model inside of a list item, then the 3d model overflows past the bottom of the screen instead of scaling for the height of the list item.  My goal is ultimately to have a list item which contains the 3d model on the left, and some text describing it on the right.  How can I fix this, so that when the model is placed inside of a list item tag, it scales relative to the height of the list item?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const TAU = Zdog.TAU;
  
  let hat = new Zdog.Illustration({
    element: '.zdog-canvas', // set canvas with selector
    dragRotate: true,
    rotate: {x: TAU/4, z: TAU/-6},
      translate: {y: 20},
    zoom: 4,
      onResize: function( width ){
                this.zoom = width / 300;
            }
  });
  
  
  var dome = new Zdog.Hemisphere({
    addTo: hat,
    diameter: 80,
    stroke: 20,
    color: 'blue',
    fill: true,
  });
  
  var brim = new Zdog.Ellipse({
    addTo: dome,
    width: 95,
    height: 73,
    quarters: 2,
    stroke: 20,
    translate: {y: 34},
    rotate: {z: TAU/4},
    fill: true,
    color: 'blue'
  });
  
  function animate() {
    hat.rotate.z += 0.03;
    hat.updateRenderGraph();
    // animate next frame
    requestAnimationFrame( animate );
  }
  
  animate();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      margin: 0;
  }
  
  .myIcon{
      height: 100%;
      min-height: 100%;
      margin: 0;
  }
  
  .zdog-canvas {
    display: block;
    position: absolute;
    height: 100%;
    background: #FDB;
    cursor: move;
  }
  
  li{
    width: 100%;
    height: 20vh;
    background: red;
    color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"&gt;&lt;/script&gt;
  
  &lt;html&gt;
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;div class='flexbox-container'&gt;
            &lt;div class='myIcon'&gt;
              &lt;canvas class="zdog-canvas" width="800" height="500" /&gt;
            &lt;/div&gt;
            &lt;h1&gt;some text&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class='flexbox-container'&gt;
            &lt;div class='myIcon'&gt;
              &lt;canvas class="zdog-canvas" width="800" height="500" /&gt;
            &lt;/div&gt;
            &lt;h1&gt;some text&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>