Reports

Must the side menu be fixed in position?

If not, you can simply wrap the menu and the main content in a container and use CSS Grid to handle the layout. This ensures the main content area correctly fills the remaining space and can scroll independently.

<div class"wrapper">
  <div class="left-menu"></div>
  <div class="body-wrapper"></div>
</div>

.wrapper {
  display: grid;
  width: 100%;
  /* Use height: 100vh or 100dvh to make it full screen, or 100% 
     if its parent already has a defined height. */
  height: 100vh; 
  /* The grid columns: 'auto' sizes the menu to its content, 
     '1fr' gives the remaining space to the body. */
  grid-template-columns: auto 1fr;
  /* Prevents the entire grid from adding a scrollbar if inner content is too wide. */
  overflow: hidden; 
}
/* Restore scrolling behavior in the main body content. */
.body-wrapper { overflow: auto }

If the menu must be fixed, please clarify your requirements so I can provide a solution tailored to that constraint.

79805295