Невозможно получить высоту холста элемента равной высоте контейнера

Question

Я пытаюсь установить ряд брезентовых элементов на ту же высоту, что и их контейнеров:

$(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>

В Google Chrome на OS X, по крайней мере, холст меньше высоты содержащихся элементов div, а в последних 3 количество меньше для каждого. Без гибкого макета все будут на столько же меньше контейнера. Есть ли способ сделать их всех на самом деле точно такого же размера? Идеально также исправить также при использовании flex?

На данный момент меня не интересует совместимость/переносимость браузера (я использую flex, поэтому я уже решил жить на краю кровотечения), но мне нужно использовать атрибуты canvas до Я знаю, поскольку я не хочу искажать содержимое (т. Е. Я не могу использовать CSS 100% width/height).

UPDATE: добавлен CSS для фрагмента кода, чтобы отразить принятое решение, представленное в ответах (см. Комментарии в CSS).

Answer 1

Элементы canvas не являются прямыми дочерними элементами видового экрана, поэтому вам необходимо добавить display:flex в класс .canvas и проинструктировать холст, чтобы он был flex:auto.