Hide and show scrollbars

HTML

<div class="root">
  <main>


    <nav class="sidebar scrollable">
      <h2>Here be sidebar</h2>
      <ul>
        <li>The content here is already larger than the sidebar.</li>
        <li>This means that the scrollbar is already visible.</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum etc</li>
        <li>Lorem ipsum etc etc</li>
        <li>The content here is already larger than the sidebar.</li>
        <li>This means that the scrollbar is already visible.</li>
        <li>Lorem ipsum etc etc</li>
        <li>Lorem ipsum and so on</li>
        <li>Lorem ipsum etc</li>
        <li>The content here is already larger than the sidebar.</li>
        <li>This means that the scrollbar is already visible.</li>
        <li>Lorem ipsum?</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum etc</li>
        <li>Lorem ipsum etc etc</li>
      </ul>
    </nav>
    <article class="content scrollable">
      <h2>This is the content</h2>
      Zoom in to the page or re-adjust the width of the window to see the scrollbar appear in this element. Zoom in to the page or re-adjust the width of the window to see the scrollbar appear in this element.
      Zoom in to the page or re-adjust the width of the window to see the scrollbar appear in this element.
      Zoom in to the page or re-adjust the width of the window to see the scrollbar appear in this element.
      Zoom in to the page or re-adjust the width of the window to see the scrollbar appear in this element.
      Zoom in to the page or re-adjust the width of the window to see the scrollbar appear in this element.

    </article>

  </main>
</div>

CSS

* {
  margin: 0;
  box-sizing: border-box;
}

/* Hide the main page scrollbar on zoom */
html {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}

main {
  background-color: cornflowerblue;
  display: flex;
  flex: 1;
  flex-direction: row;
  height: 100%; /* % scales, but vh does not */
  padding: 20px;
  margin: 0;
}


.sidebar {
  flex: 2;
  background-color: fuchsia;
}

.content {
  flex: 5;
  background-color: cyan;
}

.scrollable {
  padding: 10px;
  height: 300px;
  overflow: auto;
  
  /* uncomment below to hide or style sidebar but keep scroll ability */
  
  /*   -ms-overflow-style: none;
  scrollbar-width: none; */
}

.scrollable::-webkit-scrollbar {
  /* display: none; */
}