I'm currently working on a dashboard and I'm having a design issue regarding the scrollbar in the content of the page. A preview that shows the different parts of the site can be found here.

Purely for design purposes, I would need to keep the current content in exactly the same position (for instance, I don't believe that resizing the components using percentages would work properly in this case) but have the scrollbar totally on the right and allow scrolling in parts that are outside of the main element. In this image the parts in green represent the areas where scrolling should be enabled.

Do I need to use JavaScript (I'm using React) and a component only for the scrollbar or can I do everything in vanilla css?