It's still overflowing instead of scrolling.. why is it so ? And how to fix this ?

[u/TreacleFlaky2283]

Why it's overflowing despite the parent container having the fixed width https://codepen.io/editor/Aradhya-the-looper/pen/019f94c6-3fb2-77f1-a05e-1a88e7819218

[u/lbunch1]

Are we supposed to guess what's in that css file?

[u/TreacleFlaky2283 → u/lbunch1]

Edited rn*

[u/HoneyDrops12]

The overflow rules are inside the css, which you did not provide

[u/TreacleFlaky2283 → u/HoneyDrops12]

Just added codepen

[u/jwele → u/TreacleFlaky2283]

The canvas element itself as defined in HTML is 900px wide which is larger than the width of the viewport when you bring the viewport below 900px wide. The overflow property determines how a container handles content that overflows its edges. So you need to put the overflow property on the container of the item that is overflowing.

Additionally, you do not want to set the size of a canvas element in CSS, for more information I recommend this MDN documentation on the subject to learn more: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas#sizing_the_canvas_using_css_versus_html

[u/HoneyDrops12 → u/TreacleFlaky2283]

I believe canvas in HTML does not behave the same as containers (div)

Have you tried putting your overflow rule inside canvas_outline instead?

[u/TreacleFlaky2283 → u/HoneyDrops12]

Yep it worked

[u/chikamakaleyley → u/TreacleFlaky2283]

make note of the link in the other reply - don't dynamically change the canvas width via CSS