Canvas pushes other flexbox items outside the container

Question

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.

Prefer codepen to check the output, as the output window can be easily resized there.

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;
}

<div class="root">
  <div class="header"></div>
  <div class="box1"></div>
  <div class="canvas-box">
    <div class="in-box1"></div>
    <div class="in-box2">
      <canvas width="1000" height="1000" />
    </div>
    <div class="in-box3"></div>
  </div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

Codepen link: https://codepen.io/80avin/pen/oNxWyje