<!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">
      Navbar
    </div>
    <div class="breadcrumb">
      Breadcrumb
    </div>
    <div class="main">
      <div class="sidebar">SCROLLABLE SIDEBAR<br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, fugiat dolor distinctio voluptatem quas beatae error ratione ipsa velit, accusantium, excepturi nisi soluta sapiente enim aut vero temporibus delectus. Cum voluptas eos facilis. Error, aut consequatur. Tempore quae, fuga laudantium pariatur vel accusantium exercitationem necessitatibus adipisci repudiandae dolore quaerat dolorum ratione vitae saepe, sequi delectus molestias harum porro ea omnis maiores vero fugiat! Voluptates amet eligendi officia a voluptatum natus hic illum quia reprehenderit fuga, aspernatur eos autem voluptatem praesentium dignissimos iure, qui modi? At consequatur ut facere, adipisci, optio voluptas quae blanditiis rem eveniet atque deleniti, accusamus vitae fuga.
      </div>
      <div class="content">
        <h1>Scroll me </h1>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia ratione quo non nostrum dolor odio distinctio quos, quia quam sit eligendi dolorum odit soluta beatae assumenda aperiam doloribus quod debitis sequi eius consectetur molestiae, corrupti porro. Porro minus ducimus quidem eaque illo sed corporis quas ullam explicabo recusandae aliquid facilis libero quos aspernatur est velit in officiis blanditiis deserunt, iste rem temporibus ipsum eius. Consectetur unde maiores obcaecati beatae animi deleniti voluptate voluptas ex error. Nihil non voluptatum ratione sint dolorem, quo soluta ea inventore. Hic facere voluptate sint quis quaerat sequi perspiciatis repellat sed aut a tenetur expedita animi, modi cum praesentium natus harum tempora, consectetur explicabo. Dolor fugit quos dolorem nam tenetur minima pariatur tempore incidunt quas nisi dolorum numquam amet, corrupti, facere vero aut vitae exercitationem enim tempora eveniet. Exercitationem magnam facere distinctio at accusamus optio aliquid iste voluptatum, labore, autem tempore inventore ipsa animi assumenda delectus veniam odit impedit quod modi quaerat, nisi hic expedita unde. Blanditiis, perferendis necessitatibus! Facilis, unde officiis recusandae assumenda labore distinctio dolore harum impedit voluptatibus vel facere consequatur iusto quasi iste veritatis ut doloribus, laborum deleniti quam omnis, sit molestiae. Praesentium possimus alias ad quod corporis iste aspernatur minus accusantium repudiandae ex ipsum itaque sequi facere natus, modi excepturi, tempora, corrupti unde. Nobis cum perferendis, vero molestias earum odio incidunt harum quaerat aliquam at accusamus tempore necessitatibus fugiat totam quibusdam quasi sapiente doloribus itaque obcaecati temporibus non commodi? Perspiciatis consectetur asperiores minus excepturi atque soluta, quaerat sunt a optio fugiat repellendus odio, aliquam vel deleniti? Excepturi mollitia, accusamus saepe temporibus laudantium ex dolorem unde soluta id consectetur nam aspernatur deserunt voluptates exercitationem cum vero veritatis, a, odio autem. Enim molestiae eum libero, nam eaque beatae amet quae, harum delectus saepe optio facilis, eos perferendis! Facere ullam nisi perspiciatis fugiat excepturi similique tempore, impedit incidunt odit ea magni at libero illum assumenda. Consequatur, deserunt cupiditate. Totam aliquam porro, hic autem, nam odit nobis aspernatur fuga culpa sit nisi. Iste nesciunt error fugiat soluta modi labore. Adipisci deserunt, officia rem repellendus autem consequuntur ducimus, quibusdam quo perspiciatis ipsum vel. In ad obcaecati hic omnis neque magni dolorem quibusdam! Quia ipsam cum tempore possimus natus, quos minus amet doloremque obcaecati praesentium rerum iure magni temporibus, eos adipisci. Vero odit quasi iure deleniti, voluptatibus perspiciatis laborum excepturi delectus ab exercitationem tempore esse voluptas mollitia blanditiis quis animi doloremque dignissimos? Fugit quisquam animi illum omnis obcaecati incidunt! Excepturi et vitae nihil quaerat nesciunt assumenda perferendis ullam voluptatum suscipit! Facilis nemo aperiam quae nulla incidunt, placeat qui animi repellendus sunt magnam atque dolorum quia a esse, maxime ullam exercitationem quisquam deserunt ad inventore. Blanditiis harum fugit ut explicabo? Voluptas, atque eaque? Rerum quaerat nam saepe neque non aspernatur in ab fugit, placeat ea eos iusto omnis repellendus iste magni expedita nesciunt magnam id ratione officia? Corrupti provident cumque enim. Expedita inventore temporibus nostrum, perferendis nemo placeat voluptates perspiciatis maxime voluptate aliquam distinctio tempore est voluptatum cumque laboriosam nisi similique hic dolorem iste. Veritatis in nihil ad at quasi illo possimus magnam repellat, tenetur consequuntur ipsa sit laudantium modi totam odit, est, voluptates nesciunt architecto! Beatae nisi, ullam sequi dicta excepturi provident. Suscipit cum officiis, beatae harum nemo odit maiores magni et autem deleniti corrupti voluptatem sapiente placeat dolorum quae. Ab architecto dolorem quos in quia error, dolores id assumenda ratione, provident ad corporis aliquam, voluptas inventore suscipit voluptatum aperiam necessitatibus adipisci veniam sit consequatur odio? Dolores excepturi molestiae quibusdam reprehenderit, suscipit expedita animi, iure vitae cum quaerat veniam nesciunt ipsam quod! Fuga nisi quasi soluta adipisci porro, amet odio aperiam nam sunt voluptates atque eveniet nihil fugiat a nostrum voluptatibus, cupiditate saepe. A necessitatibus ex aliquam ratione perferendis adipisci quisquam labore, quod velit nihil molestias suscipit quidem unde vitae modi voluptatibus quasi corporis hic, molestiae non eius odio similique! Illum vitae corrupti eligendi inventore dolorem debitis, reiciendis velit tempora saepe dolor repellendus, accusantium perspiciatis, exercitationem quasi? Qui sequi maiores eos corrupti! Quaerat delectus voluptatibus distinctio sequi cum saepe autem et aspernatur eaque maiores facilis aperiam, culpa, molestiae magni obcaecati, id assumenda dicta repellendus modi harum? Tenetur recusandae nostrum at quod ex a accusamus laudantium inventore hic pariatur corporis dolore culpa libero ipsum molestiae, totam cum ipsa. Voluptas distinctio, quidem accusantium facilis at optio. Quasi suscipit quibusdam assumenda iusto eveniet nesciunt at, mollitia obcaecati aut illum est ipsam. Animi ad, officiis quas, sapiente quis vel dolor molestiae quaerat accusantium neque sint nulla optio maxime voluptatibus! Quo libero, reprehenderit architecto eius ullam in facilis eligendi aliquam vitae cumque pariatur deserunt reiciendis, expedita, dolor autem nulla provident hic maiores a quis quos dolores laudantium ad. Sequi voluptas voluptatibus quibusdam ut eaque voluptatem perferendis mollitia laudantium dolorum in aut veniam sint, sunt exercitationem? Esse, accusantium nesciunt. Ratione nobis nam id delectus facere eaque corrupti eius fugit corporis tenetur. Amet quo velit doloremque labore nemo voluptate! Laudantium cumque ab voluptas assumenda? Eos obcaecati nobis saepe praesentium consectetur id, sapiente, veritatis beatae amet rerum sunt nam possimus modi culpa deserunt, provident accusantium voluptatem! Ullam neque possimus tenetur? Dignissimos inventore ipsum repudiandae nam quae consequatur iure unde eum modi itaque, odit aliquam repellendus neque. Ipsa rem commodi quibusdam? Suscipit veniam nesciunt architecto quaerat consectetur. Hic a velit alias omnis, doloremque natus iste quia dicta ipsam officiis, deserunt eos! Eos consequatur unde, iusto inventore ut, temporibus laudantium provident beatae saepe ullam consequuntur esse quia suscipit, doloremque facilis facere vel molestias atque tempore dolore deleniti repudiandae corporis. Nihil facere corrupti nisi magnam ratione autem culpa, deleniti enim ducimus architecto atque repellendus distinctio perferendis voluptate, numquam, error ad a! Consectetur ut corporis eveniet nesciunt suscipit optio rem non pariatur a aspernatur. Est sed cumque excepturi tenetur, quae voluptas. Optio praesentium aperiam sunt impedit beatae incidunt cum ut aliquid debitis eum ad, qui tempora vel quia unde quas dolorem aut atque culpa itaque laudantium similique! Ipsam dignissimos accusamus ex quas. Laudantium ullam a cumque numquam sequi blanditiis natus laborum ratione magni fuga magnam iusto, voluptate esse minus nesciunt itaque neque omnis officia, est quidem. Consequatur dolorem eligendi delectus?
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore error praesentium modi quas impedit consequuntur, repellat et blanditiis quibusdam. Debitis voluptatibus pariatur corporis, aut in esse sapiente autem accusantium libero quidem voluptates hic harum vero nihil earum! Atque necessitatibus, veritatis perferendis numquam quae voluptate suscipit provident, ipsum ad vero cum enim amet nulla voluptas voluptates a repudiandae commodi nisi quia cumque optio doloribus temporibus consectetur! Corporis temporibus recusandae velit, quidem libero alias porro deserunt ut. Nihil nisi minus quod, magni voluptatibus ea dolore quos at dolores qui adipisci nostrum ratione saepe voluptatum ab modi beatae facilis doloremque voluptates sapiente exercitationem.
      </div>
    </div>
    <div class="footer">footer</div>
  </div>
</body>

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

/*   everything should be in 100vh height  */
.layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar {
  background: pink;
  padding: 1rem;
}

.breadcrumb {
  background: yellow;
  padding: 1rem;
}

.main {
  background: red;
  /*   take the remaining height of container using flex: 1 or height: 100% */
  /*   flex: 1; */
  height: 100%;
  position: relative;
}

.sidebar {
  background: green;
  color: white;
  padding: 5px;
  /*   This will position w.r.t the .main div */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem;
  overflow-y: scroll;
}

.content {
  position: absolute;
  padding: 1rem;
  top: 0;
  left: 10rem;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  background: blue;
  color: white;
}

.footer {
  height: 5rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.