html - Canvas 将其他 flexbox 项推送到容器外

Question

我正在为移动和网络创建一个绘图应用程序。UI 结构如附加的代码示例中所示。我希望画布占用最大可能的空间，而不会将其他内容推到父 flexbox 之外。目前，当我将窗口从纵向模式调整为横向模式时，画布会增长并将其他框推出视图。

首选 codepen 来检查输出，因为可以在那里轻松调整输出窗口的大小。

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 链接：https ://codepen.io/80avin/pen/oNxWyje

标签： htmlcssflexboxhtml5-canvas