<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="layout">
    <div class="navbar">nav</div>
    <div class="main">
      <div class="sidebar">
        <h1>SIDEBAR</h1>
        <br>
        which is scrollable
        <br>
        <br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, voluptatem totam! Eius quasi illum nisi officiis totam eum quae ad quo consequuntur accusamus doloribus harum molestiae consequatur earum maiores, quod, in, dignissimos alias porro blanditiis! Esse accusamus ea dolores distinctio, qui animi blanditiis reiciendis optio dolore nostrum molestiae eveniet praesentium assumenda magni fuga architecto nulla ratione. Eius aliquam consequatur culpa nam itaque praesentium ipsa, libero nulla cupiditate totam facilis delectus sit. Ullam quidem, saepe recusandae vitae dicta deleniti! Vitae placeat necessitatibus harum optio eos doloribus, quibusdam voluptates dolorem earum culpa magni nemo tenetur animi aperiam! Debitis, laudantium. Quia, necessitatibus hic.
      </div>
      <div class="content">
        <h1>scroll me</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aspernatur illum esse pariatur architecto numquam, doloremque eligendi repellendus quos incidunt nam harum at vero ducimus consequatur iste, ex aliquam quae minus nihil neque vitae minima placeat dolore? Ipsum quas eius ducimus quibusdam excepturi perferendis neque, consequuntur omnis, est vitae delectus placeat asperiores. Enim qui consequuntur deleniti eligendi minima repellendus rerum totam numquam, saepe quae, cupiditate est vel. Sint fuga asperiores totam consequatur porro delectus illum. Laudantium earum illum quidem consectetur voluptate, inventore dolorem soluta, tenetur quibusdam repellendus hic! Id, cupiditate nam doloremque nihil fugit accusamus aliquam necessitatibus modi distinctio libero nulla beatae eligendi voluptatem consequatur nemo ipsam excepturi corrupti nobis quia porro harum earum! Blanditiis, velit omnis aspernatur, necessitatibus repellat praesentium expedita repellendus fugiat consectetur dignissimos odio ullam possimus, iusto officia! Distinctio, ipsam. Ab quia esse commodi vel obcaecati animi blanditiis repellat sequi. Ipsam, voluptates, maxime tenetur, ullam quibusdam expedita vero dignissimos omnis magni culpa vitae esse officiis quasi enim eius atque natus consequatur saepe earum accusamus totam? Itaque accusantium voluptate recusandae, non autem fuga perspiciatis, quas pariatur cum rerum harum laboriosam. Nostrum ratione dignissimos, rem aliquam maxime quasi voluptates molestias, eaque fugit hic nam debitis neque impedit explicabo consequatur magnam odit culpa! Dolorum aliquid quae sed laborum. Temporibus, quo. Ea exercitationem repellendus nihil fugit dolor. Quod voluptate, officiis, veniam officia, repellat odio dolorum architecto laborum exercitationem aut enim? Cumque eos pariatur sint aliquam sapiente minus nihil itaque numquam possimus eligendi vitae a culpa fugiat animi, inventore ipsum placeat tempore atque minima repellat architecto vel maiores labore. Reiciendis dolores, deserunt officia, aut quos voluptate expedita harum libero est nesciunt beatae quibusdam voluptatibus laboriosam eius recusandae officiis laborum! Consequuntur mollitia quia aliquam quasi dicta totam eaque! Dolor tenetur incidunt consectetur in consequatur qui ipsum quod reiciendis numquam, sunt perspiciatis porro delectus quas, minus rerum. Laudantium rem exercitationem minima perferendis doloremque nisi harum officiis ducimus explicabo saepe suscipit illo sapiente dignissimos obcaecati veniam, consequuntur magnam ipsam non. Alias eligendi soluta est. Modi autem consequatur porro nemo, quidem aperiam quo nisi in quae unde, nulla laboriosam fugit enim dolorum doloremque perspiciatis facere reprehenderit commodi quaerat nobis? Aperiam repellat optio illum laborum doloremque provident, sint iure temporibus dolorem et nostrum inventore, unde quisquam, quibusdam aspernatur culpa corrupti odit est enim atque fugit alias quidem? Ipsa, saepe facere quis iste totam quidem assumenda cupiditate numquam nesciunt ad quae reprehenderit exercitationem suscipit! Reiciendis ipsam, excepturi facere aliquid quod laudantium in quo praesentium neque porro. Consequatur similique quisquam nostrum facere architecto, accusantium repudiandae inventore cupiditate voluptas nam totam nulla saepe earum eveniet atque a sunt, iste nesciunt odit dolorum aliquam quia molestias. Doloremque quis eos, dolorum asperiores et excepturi nemo ipsa magni vel neque minima in ducimus odio non eaque officia eligendi tempore ex pariatur at esse? Porro maiores animi cum esse nemo voluptatem tempora similique illo totam voluptatibus, iste ducimus nam aliquam voluptas eius ullam eveniet debitis labore necessitatibus aut eaque delectus dignissimos. Accusantium quasi neque atque ea quibusdam nostrum provident saepe soluta dolore illum obcaecati, praesentium fuga. Magnam officiis perferendis debitis esse, amet eligendi voluptatem? Cum veritatis quo eos? Qui odio numquam modi id impedit nulla praesentium nesciunt, maiores, soluta unde dolorum! Tempore eaque reiciendis fugiat, nisi alias dicta reprehenderit ut ipsum impedit aut. Voluptatum doloribus nesciunt commodi culpa aut, praesentium quisquam, quis explicabo hic consequuntur quam. Sunt cumque architecto sit et repellat, ab, eum totam deleniti autem corporis animi! Suscipit molestias, porro distinctio, ipsa impedit, a sint nulla rerum neque corrupti sequi repellat natus vitae ullam dolores! Iure omnis iusto at veritatis aliquam, amet totam, temporibus placeat natus, ab laborum cumque! Dolore perspiciatis, voluptatibus sequi repudiandae placeat eaque veritatis error excepturi exercitationem nisi officia? Consequatur rerum voluptas dolor modi, adipisci nemo quidem fuga totam reiciendis! Veniam nesciunt blanditiis est, possimus quis nulla alias, laborum consequuntur delectus distinctio illum eos nemo dolores obcaecati corrupti atque, eaque eum assumenda asperiores id debitis! Dolore, iure doloremque. Velit tempore consequuntur nostrum nulla sed eligendi accusantium aliquid iure soluta, quam perspiciatis nam voluptatum assumenda quaerat quos nesciunt possimus fugiat corporis voluptatem facilis incidunt accusamus omnis quasi? Nam dolorum eum ipsum nulla modi odio saepe eveniet fuga dolor sit esse accusamus, veritatis adipisci totam non ut consequatur illum quia, enim quidem nesciunt! Voluptatem facere quaerat eius at. Rem maxime ipsa tempora minus omnis, libero fugit ullam rerum nulla voluptates neque provident quisquam quam quis adipisci ducimus aliquam obcaecati, debitis dolorum earum officia accusantium. Adipisci at mollitia reprehenderit sint laudantium illum expedita cumque aspernatur! Eius pariatur dolorem reprehenderit similique totam veritatis, in accusantium ad tempore voluptate dolore minus hic harum nihil fuga libero nemo debitis quae consequuntur perspiciatis? Odio sapiente quia ut maxime harum repellat perspiciatis quos natus dolores, dolor fugiat facilis nobis soluta inventore ipsum nam vitae cumque perferendis sunt. Suscipit cum, earum nemo doloremque maxime ea reprehenderit odit minima, nesciunt beatae praesentium quas rem. Dolore tempora modi veniam deserunt repellat animi molestiae voluptate. Ducimus voluptatem quis blanditiis, corrupti dicta esse provident velit necessitatibus, iure dolorem sapiente sequi cumque illo optio voluptatum. Assumenda vero itaque, expedita quidem eaque ut unde quaerat animi sapiente iusto nulla excepturi? Omnis vero, blanditiis culpa tempore at architecto optio. Ut voluptatem distinctio, iste dolorum tempora maxime fuga maiores! Quos consequatur, fuga voluptatibus dolorem magnam odio nostrum repellendus rerum enim quae aliquid ipsum aspernatur laborum illo tenetur tempore eos laudantium illum sapiente in modi? Praesentium non pariatur consequatur perferendis modi labore quod ad, delectus officiis nostrum iure laboriosam repellat cupiditate fugiat animi iste iusto saepe nemo at. Quaerat consequuntur tempore harum. Quod, voluptas? Tempora asperiores assumenda porro cupiditate odio earum id officiis esse saepe eaque vel, totam omnis sapiente iure exercitationem mollitia soluta, voluptas repellat, sequi doloribus deleniti dolorem. Cupiditate nesciunt sapiente ad explicabo. Ullam aspernatur nam itaque fugit voluptas molestias iure, dolorem eveniet, quisquam placeat quo. Ratione, vel adipisci. Culpa reiciendis est, blanditiis totam aliquam accusamus omnis ab cumque? Dignissimos dolorem minus enim nobis assumenda delectus amet accusantium error cumque nam ex at sapiente ratione, possimus perferendis magnam, illo nemo nihil officia, aperiam inventore vel.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas quos consequuntur fugiat reprehenderit maxime molestiae iure incidunt, inventore assumenda asperiores dolorem vitae repudiandae in aut veritatis provident sint, aliquam hic odio. Tempore dolores consequuntur ullam perspiciatis quos nostrum laboriosam iure hic excepturi debitis ipsa, magni corrupti. Quasi, voluptates odit? Odit mollitia iure sint. Ut impedit reprehenderit tenetur. Doloribus sunt inventore fugiat facilis? Recusandae saepe sapiente ab quia sunt tempora iure voluptatem officiis dolore magnam magni veniam doloremque porro eaque at ipsum, vel commodi iste! Aperiam vitae corporis minus omnis consequuntur fugiat nostrum nulla quos exercitationem officiis, magnam sapiente delectus beatae.
      </div>
    </div>
  </div>
</body>

</html>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.layout {
  display: grid;
  height: 100vh;
  grid-auto-rows: auto 1fr;
  grid-template-columns: repeat(12, 1fr);
}

.navbar {
  background: red;
  padding: 1rem;
  grid-column: 1/-1;
}

.main {
  background: pink;
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /*   make sure to make the parent container as overflow scrollable (try commenting this property and check the result for better understanding 😉) */
  overflow-y: scroll;
}

.sidebar {
  grid-column: 1/4;
  background: blue;
  /*   since the parent is scrollable on overflow the child can be overflowed as well */
  overflow-y: scroll;
}

.content {
  grid-column: 4/13;
  background: yellow;
  /*   since the parent is scrollable on overflow the child can be overflowed as well */
  overflow-y: scroll;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.