Como Criar Uma Barra De Rolagem Em Uma DIV

Alguma vez você já precisou criar uma barra de rolagem DENTRO de uma div?
Você quer que aquele determinado conteúdo cresça sem a necessidade da página toda crescer junto, então para isso precisaria que somente aquele determinado trecho fizesse o scroll.

Com CSS conseguimos fazer isso sem nenhuma dificuldade!
Você só precisa utilizar a propriedade overflow!

Vamos criar uma div que tenha um tamanho de no máximo 300px:

<style>
  .container {
    height: 300px;
  }
</style>

<div class="container">
  <p>Conteúdo</p>
</div>

Para então adicionarmos o scroll nessa div, devemos adicionar o seguinte CSS:

<style>
  .container {
    height: 300px;
    overflow-y: scroll;
  }
</style>

<div class="container">
  <p>Conteúdo</p>
</div>

Nesse caso, queremos que tenha scroll apenas pra cima e para baixo, por isso usamos o overflow-y (do eixo cartesiano!)
Caso quiséssemos fazer scroll na horizontal, usaríamos o eixo X, ou seja, overflow-x

Fica muito fácil assim, não é?