You are actually missing code to re-create the problem, but I have managed to piece enough together to get some idea what is going on.
I’m putting it down to the height: 100%display: flex settings on the body.
Are those really needed?
Thanks for your help, I have removed the height:100% from the body and this indeed has resolved my original issue, however My left hand menu is not at 100% full height even if I add the following code.
Selected snippits of code infrequently include all of the relevent code (in spite of best intentions). As such (and as demonstrated in many of our responses to members) we appreciate members posting a “working page” that actually demonstrates their issue.
A “working page” begins with the <!doctype html> that you are using, it includes the <head> section with full URLs to assets (not local URLs) and the CSS is between <style> tags, the <body> section of course, and places most JS at the end of the page just before the </body> tag, and finally ends with </html>. It is also reasonably well formatted for readability.
If you double-click the file (the “working page”) on your computer, it will open in your browser and should display the problem behavior, which means that when we copy it to a file and open it in our browsers, we will see what you see. You can use the “working page” to systematically remove irrelevent code and know that the HTML and CSS that remains continues to demonstrate the problem.
Some members prefer to create a simplified test site where suggestions can be tested and just post the URL to that test site.
The goal, of course, is to help us help you resolve the issue as quickly and effectively as possible.
Yes, it will need that or overflow:auto; to insure access to content on smaller screens.
I’m not sure what the OP’s intentions are, it looks like it might be some sort of control panel. There’s been no mention of it, but it looks like it could be a fixed position sidebar, in that case it would need overflow:auto; . Otherwise min-height:100vh if the sidebar is to scroll with the rest of the page.