Прокрутка в календаре

Как можно сделать прокрутку в этом календаре ? (прокрутка должна быть только у sidebar)

html:

<main class="calendar-contain">
  <section class="title-bar">
    <button class="title-bar__burger">
      <span class="burger__lines">Toggle Menu</span>
    </button>
    <span class="title-bar__year">
      Calendar > May 2017
    </span>
    <span class="title-bar__month">
      Month
    </span>
    <div class="title-bar__controls">
      <div class="title-bar__minimize"></div>
      <div class="title-bar__maximize"></div>
      <div class="title-bar__close"></div>
    </div>
  </section>
  <aside class="calendar__sidebar">
    <div class="sidebar__nav">
      <!-- Icons by Icons8 -->
    </div>
    <h2 class="sidebar__heading">Wednesday<br>April 6</h2>
    <ul class="sidebar__list">
      <li class="sidebar__list-item sidebar__list-item--complete"><span class="list-item__time">8.30</span> Team Meeting</li>
      <li class="sidebar__list-item sidebar__list-item--complete"><span class="list-item__time">10.00</span> Lunch with Sasha</li>
      <li class="sidebar__list-item"><span class="list-item__time">2.30</span> Design Review</li>
      <li class="sidebar__list-item"><span class="list-item__time">4.00</span> Get Groceries</li>
            <li class="sidebar__list-item"><span class="list-item__time">4.00</span> Get Groceries</li>
            <li class="sidebar__list-item"><span class="list-item__time">4.00</span> Get Groceries</li>
            <li class="sidebar__list-item"><span class="list-item__time">4.00</span> Get Groceries</li>
            <li class="sidebar__list-item"><span class="list-item__time">4.00</span> Get Groceries</li>
            <li class="sidebar__list-item"><span class="list-item__time">4.00</span> Get Groceries</li>
            <li class="sidebar__list-item"><span class="list-item__time">4.00</span> Get Groceries</li>
            <li class="sidebar__list-item"><span class="list-item__time">4.00</span> Get Groceries</li>
    </ul>
  </aside>

  <section class="calendar__days">
    <section class="calendar__top-bar">
      <span class="top-bar__days">Mon</span>
      <span class="top-bar__days">Tue</span>
      <span class="top-bar__days">Wed</span>
      <span class="top-bar__days">Thu</span>
      <span class="top-bar__days">Fri</span>
      <span class="top-bar__days">Sat</span>
      <span class="top-bar__days">Sun</span>
    </section>
    <section class="calendar__week">
      <div class="calendar__day inactive">
        <span class="calendar__date">30</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day inactive">
        <span class="calendar__date">31</span>
        <span class="calendar__task">4</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">1</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">2</span>
        <span class="calendar__task">3</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">3</span>
        <span class="calendar__task">1</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">4</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">5</span>
        <span class="calendar__task">4</span>
      </div>
    </section>
    <section class="calendar__week">
      <div class="calendar__day">
        <span class="calendar__date">6</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">7</span>
        <span class="calendar__task">3</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">8</span>
        <span class="calendar__task">3</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">9</span>
        <span class="calendar__task">1</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">10</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">11</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">12</span>
        <span class="calendar__task">1</span>
      </div>
    </section>
    <section class="calendar__week">
      <div class="calendar__day">
        <span class="calendar__date">13</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">14</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day today">
        <span class="calendar__date">15</span>
        <span class="calendar__task calendar__task--today">4 items</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">16</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">17</span>
        <span class="calendar__task">1</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">18</span>
        <span class="calendar__task">4</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">19</span>
        <span class="calendar__task">2</span>
      </div>
    </section>
    <section class="calendar__week">
      <div class="calendar__day">
        <span class="calendar__date">20</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">21</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">22</span>
        <span class="calendar__task">1</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">23</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">24</span>
        <span class="calendar__task">5</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">25</span>
        <span class="calendar__task">3</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">26</span>
        <span class="calendar__task">1</span>
      </div>
    </section>
    <section class="calendar__week">
      <div class="calendar__day">
        <span class="calendar__date">27</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day">
        <span class="calendar__date">28</span>
        <span class="calendar__task">1</span>
      </div>
      <div class="calendar__day inactive">
        <span class="calendar__date">1</span>
        <span class="calendar__task">2</span>
      </div>
      <div class="calendar__day inactive">
        <span class="calendar__date">2</span>
        <span class="calendar__task">1</span>
      </div>
      <div class="calendar__day inactive">
        <span class="calendar__date">3</span>
        <span class="calendar__task">5</span>
      </div>
      <div class="calendar__day inactive">
        <span class="calendar__date">4</span>
        <span class="calendar__task">3</span>
      </div>
      <div class="calendar__day inactive">
        <span class="calendar__date">5</span>
        <span class="calendar__task">1</span>
      </div>
    </section>
  </section>
</main>

sass:

// Variables
// ----------------------------- //
$black: #040605;
$white: #f5f7f6;
$blue-white: #e1e7e8;
$pink: #fd588a;
$tangerine: #f86a6c;
// Global
// ----------------------------- //
* {
    outline: none;
    box-sizing: border-box;
}
html {
    font-size: 100%;
}
body {
    height: 100%;
    padding: 1rem;
    background-color: #f6f5f1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
    background-image: linear-gradient(45deg, $tangerine 0%, $pink 100%);
  @media screen and (min-width:55em) {
    height: 100vh;
    margin: 0;
  }
}
h1, h2, h3, h4, h5, h6 {
    -webkit-font-smoothing: antialiased;
}
p, span, ul, li {
    color: lighten($black, 20%);
    font-weight: 100;
    -webkit-font-smoothing: subpixel-antialiased;
    font-size: 1rem;
}
// Calendar Container
// ----------------------------- //
.calendar-contain {
    position: relative;
    left: 0;
    right: 0;
    border-radius: 0;
    width: 100%;
    overflow: hidden;
    max-width: 1020px;
    min-width: 450px;
    margin: 1rem auto;
    background-color: $white;
    box-shadow: 5px 5px 72px rgba(30, 46, 50, 0.5);
    color: $black;
    @media screen and (min-width:55em) {
        margin: auto;
        top: 5%;
    }
}
// Title bar
// ----------------------------- //
.title-bar {
    position: relative;
    width: 100%;
    display: table;
  text-align: right;
  background:$white;
  padding: 0.5rem;
  margin-bottom: 0;
  &:after {
    display: table;
    clear: both;
  }
}
.title-bar__burger {
    display: block;
    position: relative;
    float: left;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 38px;
    height: 30px;
    font-size: 0;
    text-indent: -9999px;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: none;
    cursor: pointer;
    background:none;
  &:focus {
    outline: none;
  }
}
.burger__lines {
  display: block;
  position: absolute;
  width: 18px;
  top: 15px;
  left: 0;
  right: 0;
  margin: auto;
  height: 1px;
  background: $black;
  &:before,
  &:after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: $black;
    content: "";
  }
  &:before {
    top: -5px;
  }
  &:after {
    bottom: -5px;
  }
}
.title-bar__year {
    display: block;
    position: relative;
    float: left;
  font-size: 1rem;
    line-height: 30px;
    width: 43%;
    padding: 0 0.5rem;
    text-align: left;
    @media screen and (min-width:55em) {
        width: 27%;
    }
}
.title-bar__month {
    position: relative;
    float: left;
  font-size: 1rem;
    line-height: 30px;
    width: 22%;
    padding: 0 0.5rem;
    text-align: left;
    @media screen and (min-width:55em) {
        width: 12%;
    }
    &:after {
        content: "";
        display: inline;
        position: absolute;
        width: 10px;
        height: 10px;
        right: 0;
        top: 5px;
        margin: auto;
        border-top: 1px solid rgb(0, 0, 0);
        border-right: 1px solid rgb(0, 0, 0);
        transform: rotate(135deg);
    }
}
.title-bar__minimize,
.title-bar__maximize,
.title-bar__close
{
  position: relative;
  float: left;
  width: 34px;
  height: 34px;
  &:before,
  &:after {
    top: 30%;
    right: 30%;
    bottom: 30%;
    left: 30%;
    content: " ";
    position: absolute;
    border-color: #8e8e8e;
    border-style: solid;
    border-width: 0 0 2px 0;
  }
}
.title-bar .title-bar__controls {
    display: inline-block;
    vertical-align: top;
    position: relative;
    float: right;
    width: auto;
    &:before,
    &:after {
        content: none;
    }
}
.title-bar .title-bar__minimize {
    &:before {
      border-bottom-width: 2px;
    }
}
.title-bar .title-bar__maximize {
    &:before {
      border-width: 1px 1px 2px 1px;
    }
}
.title-bar .title-bar__close:before,
.title-bar .title-bar__close:after {
  bottom: 50%;
  top: 49.9%;
}
.title-bar .title-bar__close:before {
  transform: rotate(45deg);
}
.title-bar .title-bar__close:after {
  transform: rotate(-45deg);
}
.title-bar .title-bar__close:hover {
  // background-color: #E04343;
}
.title-bar div:hover:after,
.title-bar div:hover:before {
  // border-color: #333333;
}
.title-bar .title-bar__close:hover:after,
.title-bar .title-bar__close:hover:before {
  // border-color: #FFFFFF;
}

// Side bar
// ----------------------------- //
.calendar__sidebar {
    width: 100%;
    margin: 0 auto;
    float: none;
    background:linear-gradient(120deg, lighten($blue-white, 5%), $blue-white);
    padding-bottom: 0.7rem;
    @media screen and (min-width:55em) {
        position: absolute;
        height: 100%;
        width: 30%;
        float: left;
        margin-bottom: 0;
    }
}
.calendar__sidebar .content{
    padding: 2rem 1.5rem 2rem 4rem;
    color: $black;
}
.sidebar__nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.9rem;
  padding: 0.7rem 1rem;
    background-color: $white;
}
.sidebar__nav-item {
    display: inline-block;
    width: 22px;
    margin-right: 23px;
    padding: 0;
    opacity: 0.8;
}
.sidebar__list{
    list-style: none;
    margin: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}
.sidebar__list-item {
    margin: 1.2rem 0;
    color: lighten($black, 20%);
    font-weight: 100;
    font-size: 1rem;
}
.list-item__time {
  display: inline-block;
    width: 60px;
    @media screen and (min-width:55em) {
        margin-right: 2rem;
    }
}
.sidebar__list-item--complete {
    color: transparentize($black, 0.7);
    .list-item__time {
        color: transparentize($black, 0.7);
    }
}
.sidebar__heading {
    font-size: 2.2rem;
    font-weight: bold;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 3rem;
    margin-top: 1rem;
    span {
        float: right;
        font-weight: 300;
    }
}
.calendar__heading-highlight {
    color: #2d444a;
    font-weight: 900;
}

// Calendar Days
// ----------------------------- //
.calendar__days {
    display: flex;
    flex-flow: column wrap;
    align-items: stretch;
    width: 100%;
    float: none;
    min-height: 580px;
    height: 100%;
    font-size: 12px;
  padding: 0.8rem 0 1rem 1rem;
    background:$white;
    @media screen and (min-width:55em) {
        width: 70%;
        float: right;
    }
}
// Top Bar
.calendar__top-bar {
  display: flex;
  flex: 32px 0 0;
}
.top-bar__days {
  width: 100%;
  padding: 0 5px;
  color: lighten($black, 20%);
  font-weight: 100;
  -webkit-font-smoothing: subpixel-antialiased;
  font-size: 1rem;
}
// Weeks & Days
.calendar__week {
  display: flex;
  flex: 1 1 0;
}
.calendar__day {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 100%;
  padding: 1.9rem 0.2rem 0.2rem;
}
.calendar__date {
  color: $black;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 0.7;
    @media screen and (min-width:55em) {
        font-size: 2.3rem;
    }
}
.calendar__week {
    .inactive {
        .calendar__date,
        .task-count {
          color: #c6c6c6;
        }
    }
    .today {
        .calendar__date {
          color: $pink;
        }
    }
}
.calendar__task {
    color: $black;
    display: flex;
    font-size: 0.8rem;
    @media screen and (min-width:55em) {
        font-size: 1rem;
    }
    &.calendar__task--today {
        color: $pink;
    }
}