overflow

Styl określa jak powinna zachowywać się zawartość bloku po wyjściu za jego granice.

Wartość:

visible

zawartość jest widoczna

hidden

zawartość która wychodzi poza element otaczający jest obcinana (niewidoczna)

scroll

blok otaczający posiada paski przewijania, które aktywują się w razie potrzeby

auto

ta właściwość nie jest dokładnie zdefiniowana ale zaleca się żeby w razie porzeby przeglądarki pokazywały paski przewijania. Jeśli nie ma takiej potrzeby (treść nie wychodzi poza obszar bloku otaczającego) styl nie wpływa na blok otaczajacy i treść

Opis overflow na stronach W3C

Zasada działania

Może to być zaskoczeniem dla wielu webmajstrów (tych IE-only) ale zgodnie ze specyfikacją blok otaczający nie powinien się rozszerzać jeśli jego zawartość jest większa od niego.

Jak to powinno działać pokazuje poniższy kod i obrazek (blok otaczający - czerwona ramka):

<div style="width:100px; border:2px solid #f00; background:#ddd;">
  <p style="width:150px; background:#eee;border:2px solid #00f">
  to jest tylko przykładowy tekst prezentujący zasadę działania width w normalnych (nie IE) przeglądarkach
  </p>
  <p>
  a to jest bardzo długie słowo konstantynopolitańczykowianeczka
  </p>
</div>

Internet Explorer - prawie jak przeglądarka

overflow:auto; nie działa w ie jeśli nie ma nałożonych wymiarów, np.:

div.thin{
  overflow:auto;
  width: 20em;
}

Czyli ustalanie wymiarów za pomocą (przykładowo) marginesów i overflow:auto w IE nie zadziała.

Jeśli Internet Explorer pokazuje dodatkowo paski pionowe, można użyć stylu dostępnego tylko dla niego: overflow-x: auto;

Oczywiście istnieje także overflow-y dla Internet Explorera.

overflow-x i overflow-y są dostępne w gecko i będą oficjalnie w css3 - przynajmniej narazie tak donosi css module: The box model - working draft.