Canvas ignoring parent size - css

Question

I have a page which displays an HTML canvas element inside a container. Since the image displayed in the canvas can be far bigger than the space I have, I forced the size of the container and used its overflow property to scroll the contente of the canvas. While both the container and the scrollbar are displayed correctly, the canvas simply ignores it.
My HTML:
<div class="sidebar">
Some content
</div>
<div class="the_wrapper">
<div class="canvas_wrapper">
<canvas id="imageCanvas"></canvas>
</div>
<div class="another_element">
Some other content
</div>
</div>
And this is the CSS:
.sidebar{
height: 100vh;
width: 20vw;
float: left;
}
.the_wrapper{
height: 100vh;
width: 80vw;
float: right;
}
.canvas_wrapper{
height: 60vh;
overflow: scroll;
}
.another_element{
height: 40vh;
}
This is what I want
But all I get is this

Answer 1

.the_wrapper do not need a float set to right.
.the_wrapper{
height: 100vh;
width: 80vw;
float: right; // Don't do that
}
Just do this
.the_wrapper {
position: absolute;
right: 0;
height: 100vh;
width: 80vw;
}
I also reset some properties to get the result of your first example.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
overflow: hidden;
}
Here the snippet result :
* {
box-sizing: border-box;
padding: 0;
margin: 0;
overflow: hidden;
}
.sidebar {
height: 100vh;
width: 20vw;
float: left;
border: 3px solid #000;
}
.the_wrapper {
position: absolute;
right: 0;
height: 100vh;
width: 80vw;
}
.canvas_wrapper {
height: 60vh;
border: 3px solid green;
}
.another_element {
height: 40vh;
border: 3px solid red;
}
<div class="sidebar">Some content</div>
<div class="the_wrapper">
<div class="canvas_wrapper">Canvas
<canvas id="imageCanvas"></canvas>
</div>
<div class="another_element">Some other content</div>
</div>
You can also try it in https://jsfiddle.net/lofeed/6n983g7x/4/

Answer 2

The wrapper is set to float to the right, meaning that all available space will be included within it.