JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="sidebar">
    <div id="header">Sidebar Header</div>
    <div id="nav">
      <div class="nav-row">
        This scrolls horizontally even though I don't want it to
      </div>
      <div class="nav-row">
        <code>div#nav</code> clips to the width of the siblings 
      </div>
      <div class="nav-row">
        without <code>overflow-y: scroll</code> on them
      </div>
      <div class="nav-row">
        <code>overflow-x: visible</code> seems to be ignored per the CSS spec
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality apparent
      </div>
      <div class="nav-row">
        More rows to make scrolling functionality...

CSS

body {
  margin: 0;
  display: grid;
  grid-template-columns: min-content auto;
}

#sidebar {
  display: grid;
  grid-template-rows:
    min-content
    auto
    min-content;
  overflow: hidden;
}

#nav {
  overflow-y: scroll;  /* to achieve desired functionality */
  overflow-x: visible; /* ignored */
}

/* below shouldn't really affect the fiddle
   just to make it a little more readable
*/

#sidebar {
  background-color: cornflowerblue;
  padding: 10px;
}

#main {
  padding: 10px;
  background-color: blanchedalmond;
}

#header, .nav-row {
  white-space: nowrap;
}