CSS - barras de rolagem

Pode haver um caso em que o conteúdo de um elemento seja maior do que a quantidade de espaço alocado para ele. Por exemplo, as propriedades de largura e altura fornecidas não permitem espaço suficiente para acomodar o conteúdo do elemento.

CSS fornece uma propriedade chamada overflow, que informa ao navegador o que fazer se o conteúdo da caixa for maior do que a própria caixa. Esta propriedade pode assumir um dos seguintes valores -

Sr. Não. Valor e descrição
1

visible

Permite que o conteúdo ultrapasse as bordas do elemento que o contém.
2

hidden

O conteúdo do elemento aninhado é simplesmente cortado na borda do elemento que o contém e nenhuma barra de rolagem fica visível.
3

scroll

O tamanho do elemento que o contém não muda, mas as barras de rolagem são adicionadas para permitir que o usuário role para ver o conteúdo.
4

auto

O propósito é o mesmo que rolar, mas a barra de rolagem será exibida apenas se o conteúdo transbordar.

Aqui está um exemplo -

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -