title: With flex box, setting canvas's width and height with parent node's clientWidth and Height hides sticky footer
body: <p>I'm trying to create column layout below, i.e. header, content and sticky footer. 
  And I want canvas's width and height to follow its content's clientWidth and clientHeight using JavaScript.</p>
  
  <pre><code>&lt;style&gt;
  body {
  ;   margin          : 0
  ;   height          : 100%
  ;   display         : flex
  ;   flex-direction  : column
  }
  
  header,
  footer {
  ;   flex    : 0
  }
  
  #content {
  ;   flex    : 1
  }
  &lt;/style&gt;
  
  &lt;header&gt;header&lt;/header&gt;
  &lt;div id=content&gt;
      &lt;canvas id=canvas&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;footer&gt;footer&lt;/footer&gt;
  
  &lt;script&gt;
      canvas = document.getElementById( 'canvas' )
      ctx = canvas.getContext( '2d' )
      const
      FitCanvas = () =&gt; {
          canvas.width = canvas.parentNode.clientWidth
          canvas.height = canvas.parentNode.clientHeight
          ctx.beginPath()
          ctx.moveTo( 0, 0 )
          ctx.lineTo( canvas.width, canvas.height )
          ctx.stroke()
      }
      window.addEventListener(
          'resize'
      ,   FitCanvas
      )
      FitCanvas()
  &lt;/script&gt;
  </code></pre>
  
  <p>It seems good when expanding window. But when shrinking window, the footer doesn't stick.</p>
  
  <p>Initial:
  <a href="https://i.stack.imgur.com/1lQr3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1lQr3.png" alt="Initial"></a></p>
  
  <p>Expanded:
  <a href="https://i.stack.imgur.com/WtoXi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WtoXi.png" alt="Expanded"></a></p>
  
  <p>Shrinked:
  <a href="https://i.stack.imgur.com/5P03q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5P03q.png" alt="Shrinked"></a></p>
  
  <p>I want make Shrinked image to match Initial image.</p>
  
  <p>Please help, thanks in advance.</p>