jquery - 无法使 Canvas 元素高度等于容器高度

Question

我正在尝试将一系列 Canvas 元素设置为与其容器相同的高度:

$(document).ready(function() {
  var c = $('.canvas canvas');
  var container = $(c).parent();

  $(window).resize(respondCanvas);

  function respondCanvas() {
    c.each(function(index) {
      $(this).attr('width', $(container[index]).width());
      $(this).attr('height', $(container[index]).height());
    });
  }

  respondCanvas();
});

.flex {
  display: flex;
  overflow: auto;
}
#viewport {
  flex: 1 0 100%;
  flex-flow: row wrap;
  justify-content: space-between;
}
.canvas {
  display: flex; /* new addition from answer */
  background: #ccc;
  margin: 0.25rem;
}
#half-breadth,
#profile {
  flex: 1 0 100%;
}
#body-plan,
#current-section,
#rendering {
  flex: 1 0 32%;
}
canvas {
  flex: auto; /* new addition from answer */
  background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="viewport" class="flex">
  <div id="half-breadth" class="canvas">
    <canvas id="half-breadth-canvas"></canvas>
  </div>
  <div id="profile" class="canvas">
    <canvas id="profile-canvas"></canvas>
  </div>
  <div id="body-plan" class="canvas">
    <canvas id="body-plan-canvas"></canvas>
  </div>
  <div id="current-section" class="canvas">
    <canvas id="current-section-canvas"></canvas>
  </div>
  <div id="rendering" class="canvas">
    <canvas id="rendering-canvas"></canvas>
  </div>
</figure>

至少在 OS X 上的 Google Chrome 中， Canvas 小于包含的 div 元素的高度，并且在最后 3 个中，小于的数量因人而异。如果没有 flex 布局，所有内容都比容器小。有什么方法可以使它们实际上完全相同吗？理想情况下也可以在使用 flex 时进行修复？

在这一点上，我不关心浏览器兼容性/可移植性(我正在使用 flex，所以我已经决定生活在最前沿)，但我确实需要尽可能地使用 Canvas 属性我知道，因为我不想扭曲内容(即我不能使用 CSS 100% 宽度/高度)。

更新:将 CSS 添加到代码片段以反射(reflect)答案中提供的已接受解决方案(请参阅 CSS 中的评论)。

Answer 1

Canvas 元素不是视口(viewport)的直接子元素，因此您必须将 display:flex 添加到 .canvas 类并指示 Canvas 为 flex:auto。