Cause body to fill the viewport, establish a CSS Grid with a header, left-nav and main body. The nav and body will scroll independently, the body will not scroll.

example.html

<template>
    <div id="mainLayout">
        <div id="header"></div>
        <div id="leftNav"></div>
        <div id="mainView"></div>
    </div>
</template>

<style>
  html, body { /* nothing necessary */ }
  
  
  #mainLayout {
      height: 100vh;

      display: grid;

      grid-template-columns: max-content 1fr;
      grid-template-rows: max-content minmax(0, 1fr);

      grid-template-areas:
          "header header"
          "nav main";

      overflow-y: hidden;
  }
  
  #mainLayout > * {
      min-height: 0;
  }
  
  #header { grid-area: header; }
  #leftNav { grid-area: nav; }
  #mainView { grid-area: main; }
</style>