Barra de rolagem em posts ou widgets

Não é algo que deva ser usado sem moderação, mas caixas com barras de rolagem podem ser úteis em algumas situações, como quando você tem que disponibilizar um código muito grande ou quando existe a possibilidade do conteúdo ser expandido dinamicamente e assim deformar o leiaute, só para citar dois exemplos.

O valor auto é o que faz a barra aparecer somente quando o conteúdo da caixa extrapola o tamanho determinada na tag <div>.

• height - altura em pixels
• width - largura em pixels
• overflow - valor da barra de rolagem
• margin-left e margin-right - configuro como auto para a caixa ficar centralizada

Seguem três aplicações desse mesmo código, só muda o conteúdo da caixa e é ele que define se cada barra de rolagem, vertical e horizontal, deve ou não aparecer.

<div style='overflow:auto; width:300px; height:300px; margin-left:auto; margin-right:auto;'>Conteúdo aqui.</div>

Exemplo 1 → barra vertical:

Motivo

Eu canto porque o instante existe
E a minha vida está completa.
Não sou alegre nem sou triste:
Sou poeta.

Irmã das coisas fugidias,
Não sinto gozo nem tormento.
Atravesso noites e dias
No vento

Se desmorono ou se edifico,
Se permaneço, ou me desfaço,
- não sei, não sei. Não sei se fico
ou passo.

Sei que canto. E a canção é tudo.
Tem sangue eterno a asa ritmada.
E um dia sei que estarei muda:
- mais nada.

Cecília Meireles

Exemplo 2 → barra horizontal:

Exemplo 3 → duas barras:

Outros valores para overflow:

• inherit → herdar do elemento superior na folha de estilos
• visible (padrão) → mostra todo o conteúdo da caixa, nem que para isso tenha que desrespeitar o tamanho da caixa e atropelar outros elementos da página.
• hidden → sem barra de rolagem
• scroll → com barra de rolagem. Não dá um visual legal, porque o background da barra aparece mesmo se ela for desnecessária.
• auto → o modo inteligente: a barra aparece somente se for necessária.

Até mais!

Fontes: As Menininhas e HTML Dog