キャンバスはページでスクロールしません

Question

私のアプリにキャンバスがあります。私はスポーツトーナメントブラケットを作ろうとしていますので、DOMマップアップを接続するためにDOM構造をキャンバスにオーバーレイしたいと思います。私がスクロールする必要があり、キャンバスがそれのように振る舞うまでうまく動作しますposition: fixed。たぶんこれはある種のフレックスバグでしょうか、私は何かばかげています。私は対角線がテキストと共にスクロールすることを期待します。この現象の原因は何ですか？

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>

Answer 1

"メイン・ビュー・コンテナ" クラスにposition: relative;を追加します。