Hi,

I've searched to find a solution my problem but I coulnd't find something that would help me (or I flew over it I guess).
Hope I don't bother you

How would I set up a canvas inside a div, so that the div acts like a constraint on that canvas while keeping the div scrollable for overflow?

According to a stackoverflow solution (to achieve a header, content, footer layout, see: https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-rema...), I'm using flexbox for my layouting (the css is unchanged compared to the stackoverflow solution).

Code:

<div class="box marg-lr">
    <div class="row header">
      <p class="pCenter">
        <b>My Header</b>
      </p>
    </div>
    <div class="row content">
      <canvas id="diagramMiddle" width="2100" height="2100">
        This page requires a browser that supports HTML 5 Canvas element.
      </canvas>
    </div>
    <div class="row footer">
      <p>My Footer</p>
    </div>
  </div>
 

The css is the same as in the given link above and is not pasted as I do not want to overload that post.

Problem#1: The canvas is not taking the size. Inspecting the DOM using the DevTools, I could find out that the size of the canvas element is actually height="1122" and width="793".

Problem#2: The wrapping div container of the canvas element is resizing and the overflow is not showing. The div's height is getting the canvas' height and the canvas is not taking the full width.

Goal: Put a canvas inside a div which allows me to scroll (or pan) through the canvas content while the div is taking up the remaining width and height between two other divs (remind of the header, content, footer layout).

I hope I made things clear.
If I would know how to make a demo fiddle with mindfusion, I would do that.

Kind regards.

Thanks for the quick response.
It is working now! The problem was indeed a combination of the diagram bounds + using the wrong css height parameter for the css box class. It should better be 100vh instead of 100%.

Bless you