Hi csshtmljscoding and welcome to WebmasterWorld [webmasterworld.com]

The Charter [webmasterworld.com] for this forum explains how to post specific questions regarding html and the relevant css. You are asking us to visit jsfiddle to see your code, and then troubleshoot it there. This might benefit you but no one else and for that reason, the Charter asks that you do a little basic troubleshooting on your own and then share the relevant snippets.

From a quick look I'd guess that your use of flex might be part of the cause but I do not have time to sort though the js to determine possible settings and actions and errors, sorry.

Your description of the results you want are not as clear to others as they may be to you. Is that blue square supposed to be the background and the red square supposed to be in front of it and covering the full screen?

You know what you are trying to achieve and we have some users with spare time, someone might help out.

The svg is only as high as the inner window but when you scroll the window the svg scrolls with it.

I don't know how to fix that in the code.

Generally the svg would need to be set to a width of "max-width: 100%;" but you are using flex so its container may be set differently. It can only fill the space that contains it.

You might want to read up on using flexbox layouts: https://www.w3schools.com/css/css3_flexbox.asp

Your positioning may not work correctly within flex elements.

I am not exactly sure how I would fix that in the code.

There is a link to the Charter up above. In the Charter there are links to free troubleshooting tools. Those tools should help you spot any invalid code.

When viewed like this, background should be behind the svg.

Look up the css attribute
z-index
It's sometimes relevant if you need one element to display in front of another.

I've tried doing that, it did not help in my case here.

The SVG are the blue boxes, and the blue boxes are supposed to cover the entire screen to the bottom, where the red is.