CSS for either Flexbox or Grid 4 Box Layout (should be Easy)

I need a 4 box layout.

There are 4 areas, 3 of which are important. The main part is a Canvas that a user can draw content to. Content of the canvas can exceed what the user draws on the screen. Thus, it needs two more Boxes that will hold my Horizontal and Vertical Scrollbars. The scrollbars are 20px high for the horizontal bar, and 20 pixels wide for the vertical scrollbar. 4th box can be a nothing box, pad, placeholder, whatever you want to call it. Basically "a normal window".

CANVAS AND SCROLLBARS JS CODE IS DONE.



I am not requesting someone make me a canvas, that is a WIP. I just need a simple 4 Box CSS container.

Heres the trouble. The scrollbars only display depending on conditions in the canvas. Thats already programmed in. So I need something that will allow collapsing the right "boxes" that contain the right scrollbar. Likewise, for the bottom, the bottom row needs to also collapse when the scrollbar is hidden. The scrollbars themselves I just set to "display: none" when they are not needed.

In the screenshot above, the Scrollbars are not in the same block as the canvas where the game map thingy is drawn, they are absolute so they dont affect the size of the canvas, and that is what I want to change in order to maximize visibility for a user. I just need some sort of Flexbox or Grid layout that can COLLAPSE where those scrollbars are at when they are not needed.

Not sure a Grid will work because the Grid appears to only allow same size boxes, not varying size boxes.

I appear to suck terribly at Flexbox. It also may not be the best approach.

A little help fellas?

 

Honestly I can't figure out what you're even asking. You talk about "boxes" but don't show them, explain what they are, or why they're even on the screen.

Are you asking how to intercept the scrollbars so they move the canvas?