title: Canvas pushes other flexbox items outside the container
body: <p>I am creating a drawing app for mobile and web. The UI structure is as in the attached code sample. I want the canvas to take maximum possible space without pushing other content outside the parent flexbox.
  Currently, as I resize the window from portrait to landscape mode, the canvas grows and pushes other boxes out of the view.</p>
  <p>Prefer codepen to check the output, as the output window can be easily resized there.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }
  
  .root {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .header {
    flex: 0 0 60px;
    background: #ff9;
  }
  
  .box1 {
    flex: 0 0 20px;
    background: #f9f;
  }
  
  canvas {
    background: black;
    max-width: 100%;
    max-height: 100%;
  }
  
  .canvas-box {
    flex: 1 1 400px;
    background: #f99;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
  
  .box3 {
    flex: 0 0 150px;
    background: #9ff;
  }
  
  .box4 {
    flex: 0 0 20px;
    background: #9f9;
  }
  
  .in-box1 {
    flex: 0 0 40px;
    height: 100%;
    background: #ff0;
  }
  
  .in-box2 {
    flex: 1 1;
    background: #fff;
  }
  
  .in-box3 {
    flex: 0 0 40px;
    height: 100%;
    background: #0ff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="root"&gt;
    &lt;div class="header"&gt;&lt;/div&gt;
    &lt;div class="box1"&gt;&lt;/div&gt;
    &lt;div class="canvas-box"&gt;
      &lt;div class="in-box1"&gt;&lt;/div&gt;
      &lt;div class="in-box2"&gt;
        &lt;canvas width="1000" height="1000" /&gt;
      &lt;/div&gt;
      &lt;div class="in-box3"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="box3"&gt;&lt;/div&gt;
    &lt;div class="box4"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Codepen link: <a href="https://codepen.io/80avin/pen/oNxWyje" rel="nofollow noreferrer">https://codepen.io/80avin/pen/oNxWyje</a></p>