Responsive, scrollable panels with Flexbox

scrollable-flexbox.css

html,
body {
  height: 100%;
  line-height: 1.5;
}
.wrap {
  display: box;
  display: flex;
  height: 100vh;
}
main {
  display: box;
  display: flex;
  flex: 1;
}
@media (max-width: 800px) {
  main {
    flex-direction: column;
    -webkit-box-orient: vertical;
  }
}
aside,
article {
  overflow-y: scroll;
  padding: 2em;
}
aside {
  background: #f7f7f7;
  flex: 1;
}
article {
  background: #f0eeee;
  flex: 2;
}
h1 {
  margin-top: 0;
}

scrollable-flexbox.htm

<div class="wrap">
  <main>
    <aside>
      <h1>Sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor mi id justo lobortis, quis scelerisque lectus fermentum. Donec at lectus vel urna varius gravida. Nam elementum, velit ac condimentum elementum, nunc massa vulputate justo, at sollicitudin nibh nisl quis mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus convallis ex odio, at lacinia neque euismod vitae. Vivamus malesuada leo et tortor imperdiet, ut molestie nibh fringilla. Quisque sodales egestas interdum. Nullam a fermentum nisi.</p>
      <p>Nulla placerat lobortis urna ultrices semper. Vivamus fermentum sed elit id lacinia. Integer tempus justo non ultrices tempor. Phasellus consectetur efficitur turpis, nec consequat ligula tincidunt at. Vivamus sed nulla a nisi ullamcorper consequat. Cras semper ultrices eros rhoncus tincidunt. Praesent rutrum cursus ligula, sit amet egestas nibh aliquet ac. Nam in purus finibus, vestibulum elit eu, maximus libero. Mauris porta, ipsum et commodo pretium, nisl turpis rhoncus velit, consectetur volutpat diam nunc mollis dui. Phasellus convallis mollis dui eu varius. Nullam hendrerit hendrerit dolor ac finibus. Sed quis faucibus dui, non maximus nisl.</p>
    </aside>
    <article>
      <h1>Content</h1>
      <p>Vestibulum quis leo maximus, lacinia ante vel, tempor quam. Pellentesque consequat faucibus aliquet. Sed ultricies egestas blandit. Proin aliquam aliquet mauris nec consectetur. Nunc porttitor mattis pharetra. Praesent molestie tempor nunc, vel commodo massa fringilla at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis finibus maximus. Etiam sed ante eu quam hendrerit gravida et at ante.</p>
      <p>Duis euismod enim nisi, porttitor egestas lacus elementum vel. Nullam congue vestibulum orci, ac pellentesque libero luctus sed. Vestibulum egestas sem a leo consequat, a interdum ex commodo. Nulla id dolor est. Suspendisse et sem ut libero semper consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum sed facilisis erat. Cras ante ex, ullamcorper et vestibulum quis, mattis vel eros. </p>
    </article>
  </main>
</div>