Overflow refere-se à forma como os elementos lidam com conteúdo que excede ou transborda o tamanho do elemento contêiner. Por exemplo, o conteúdo de texto de um elemento div pode transbordar para fora de suas bordas. O overflow é bidimensional, o eixo x determina o overflow horizontal e o eixo y determina o overflow vertical. Vamos corrigir o overflow no nosso exemplo usando a propriedade CSS overflow-y. Primeiro podemos ocultar completamente o overflow com hidden assim:

<link rel="stylesheet" href="styles.css">

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

div {
  height: 200px;
  overflow-y: hidden;
}

Isso resolve o problema de overflow mas agora o conteúdo extra se torna completamente inacessível. Em vez disso, podemos usar scroll para forçar o elemento a se tornar rolável:

<link rel="stylesheet" href="styles.css">

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

div {
  height: 200px;
  overflow-y: scroll;
}

Agora isso transforma o container em um elemento rolável, permitindo que todo o conteúdo seja visualizado rolando o elemento independentemente da rolagem da página. Também poderíamos deixar o navegador lidar com isso sozinho com o valor auto. Vale ressaltar que a rolagem vertical é geralmente considerada aceitável enquanto a rolagem horizontal pode ser questionada, pois geralmente não é uma decisão comum de design. Com esse conhecimento, você agora pode controlar como seu conteúdo transborda, dando a você mais poder sobre o layout das suas páginas.