I'm trying to set a series of canvas elements to the same height as their containers:
$(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>In Google Chrome on OS X at least, the canvas is less than the height of the containing div elements, and in the last 3, the amount it is less is different for each. Without the flex layout, all are a consistent amount smaller than the container. Is there some way to make them all actually exactly the same size? Ideally also a fix also when using flex?
At this point, I don't care about browser compatibility/portability (I'm using flex, so I've already decided to live on the bleeding edge), but I do need to use canvas attributes as far as I'm aware since I do not want to distort the contents (i.e. I can't use CSS 100% width/height).
UPDATE: added CSS to code snippet to reflect accepted solution provided in answers (see comments in CSS).
The canvas elements are not direct children of viewport, so you have to add display:flex to the .canvas class and instruct canvas to be flex:auto.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments