I have a canvas in my app that doesn't scroll like I'd expect. I'm trying to make a sports tournament bracket so I'd like to have a DOM structure then overlay a canvas on it to connect the different matchups. Works great until I have to scroll and the canvas acts like it's position: fixed. Maybe this is some sort of flex bug or I'm doing something silly. I'd expect the diagonal line to scroll with the text. What is causing this behavior?
const c = document.getElementById('canvas');
const ctx = c.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.stroke();.app-container {
display: flex;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.app-nav-bar {
flex: 0 0 230px;
border: 1px solid #aaa;
background: #eef1f7 no-repeat 0 100%;
position: absolute;
top: 0;
bottom: 0;
width: 200px;
}
.header-and-body {
width: 100%;
display: flex;
flex-flow: column;
margin-left: 200px;
}
.app-header {
flex: 0 0 45px;
border: 1px solid #aaa;
}
.main-view-container {
display: flex;
height: 100%;
overflow-y: auto;
}
.tournament-container {
margin-left: 20px;
}
canvas {
position: absolute;
z-index: -1;
}
.contents {
height: 1000px;
width: 1000px;
}<div class="app-container">
<div class="app-nav-bar">Navs</div>
<div class="header-and-body">
<div class="app-header">Header</div>
<div class="main-view-container">
<div class="tournament-container">
<canvas id="canvas" width="1000" height="1000"></canvas>
<div class="contents">
<h4>Here are my contents</h4>
<h4>Some other stuff</h4>
<h4>This should scroll</h4>
</div>
</div>
</div>
</div>
</div>
