<nav>
  <ul>
    <li><a href="">Nav link 1</a></li>
    <li><a href="">Nav link 2</a></li>
    <li><a href="">Nav link 3</a></li>
    <li><a href="">Nav link 4</a></li>
    <li><a href="">Nav link 5</a></li>
    <li><a href="">Nav link 6</a></li>
    <li><a href="">Nav link 7</a></li>
    <li><a href="">Nav link 8</a></li>
    <li><a href="">Nav link 9</a></li>
    <li><a href="">Nav link 10</a></li>
    <li><a href="">Nav link 11</a></li>
    <li><a href="">Nav link 12</a></li>
    <li><a href="">Nav link 13</a></li>
    <li><a href="">Nav link 14</a></li>
    <li><a href="">Nav link 15</a></li>
  </ul>
</nav>
<main>
  <h1>overscroll-behavior</h1>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo, adipisci. Nostrum quo blanditiis molestias quisquam?</p>
  <p>Nobis repellendus, nemo repellat itaque voluptas ratione voluptates quis accusantium optio aliquam tempora atque? Numquam.</p>
  <p>Inventore fugit at molestiae, distinctio voluptatem consequuntur minus explicabo architecto incidunt, sunt, minima blanditiis. Nam?</p>
  <p>Perspiciatis eos sint praesentium, repellat aspernatur tenetur pariatur consequatur. Aliquid quis dolor ipsam? Unde, sequi.</p>
  <p>Optio dolores obcaecati quae harum nobis dolore error. Deleniti deserunt iure doloribus aspernatur ex necessitatibus!</p>
  <p>Reprehenderit suscipit officiis at ea, veritatis voluptate cum ipsa molestiae dolorem exercitationem labore vitae laborum.</p>
  <p>Sapiente nesciunt rem minima saepe corporis praesentium expedita, dolorum laudantium quia distinctio earum! Excepturi, odio?</p>
  <p>Quibusdam aliquid accusantium voluptate nesciunt sequi, quod facere deserunt ratione obcaecati? Quos odio suscipit quis.</p>
  <p>Voluptatum repudiandae harum rem deserunt quibusdam atque eius error? Non doloribus quae accusamus ducimus cumque!</p>
  <p>Nisi ratione rerum perspiciatis voluptatibus eligendi minima, aliquid itaque labore qui dolor placeat debitis officiis.</p>
  <p>Eos nihil quasi officiis. Enim accusantium beatae, sit quidem nisi itaque libero! Numquam, esse nemo.</p>
  <p>Consequuntur, dolore totam quo quas tempora qui explicabo omnis deleniti quae, iusto praesentium, sint architecto?</p>
  <p>Dolor, quis adipisci placeat quasi totam, eveniet voluptas cum reprehenderit enim, ea ducimus officia! Quia.</p>
  <p>Tenetur illo quod quisquam veniam libero culpa nihil iure beatae repudiandae aut. Voluptatibus, exercitationem adipisci?</p>
  <p>Nam consequatur voluptatum praesentium eum eos eveniet nostrum, vel iste quis hic veniam illum illo?</p>
  <p>Amet deserunt eum, pariatur error quos corporis ratione ab sunt quasi non reiciendis beatae earum?</p>
  <p>Corporis beatae qui molestias itaque ad, impedit cumque repellat, possimus similique architecto harum quisquam maiores.</p>
  <p>Assumenda, a consectetur? Blanditiis quam repellat, distinctio quisquam ratione totam reiciendis explicabo cum hic id.</p>
  <p>At distinctio hic illum et, molestiae libero, non rerum harum eius deleniti fuga iure minima.</p>
  <p>Est provident mollitia, error alias iusto repudiandae ipsam quos consequatur. Repellat, itaque culpa? Beatae, accusantium.</p>
  <p>Similique non, enim at unde asperiores deserunt, ipsam sed ratione tempore, culpa ab impedit fugit?</p>
  <p>Quas dicta dolore ipsam amet, distinctio, neque in enim quae voluptates aliquid, deleniti iure doloremque.</p>
  <p>Officiis, eaque esse numquam asperiores deleniti laborum sapiente voluptatum similique, ratione ut qui id odio.</p>
  <p>At iure deleniti minus quisquam magnam laudantium fuga maxime laborum, vero, nulla natus dolore! Repudiandae?</p>
  <p>Quisquam harum, ipsum et sequi ex quaerat repellendus maxime nostrum dicta consequatur, aut iusto expedita!</p>
</main>
nav {
  /* Scroll the nav exclusively */
  overscroll-behavior: contain;
}

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

html {
  height: 100%;
  display: grid;
  place-content: center;
  background-color: mediumvioletred;
}

body {
  font-family: system-ui, sans-serif;
  background-color: #fff;
  max-height: min(80vh, 50ch);
  width: min(80ch, 95vw);
  border-radius: 0.75rem;
  box-shadow: 0.25rem 0.25rem 0.5rem -0.15rem hsl(0 0% 0% / 30%);
  border: 1px solid hsl(0 0% 0% / 10%);
  display: grid;
  grid-template-columns: fit-content(30ch) minmax(50%, 1fr);
}

nav,
main {
  overflow-y: auto;
  padding: 1.5rem;
}

nav {
  box-shadow: 0.25rem 0 0.5rem -0.1rem hsl(0 0% 0% / 15%);
}

nav ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1em;
  font-size: 1.25rem;
}

nav a {
  color: mediumvioletred;
  text-underline-offset: 0.15em;
}

p {
  line-height: 1.5;
}

* + p {
  margin-top: 1rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.